renderValue"函数不工作。我想给选择下拉菜单一个自定义占位符，但它不起作用。
这是Select组件:
<Select
className={classNames({ error: !!error })}
labelId={name}
id={name}
value={multiple ? value || [] : value}
disabled={disabled}
multiple={multiple}
onChange={(event) => {
onChange(event);
if (handleChange) handleChange(event.target);
}}
renderValue={(selected) => {
if (!selected) {
return <em>Placeholder</em>;
}
}}
MenuProps={menuProps}
endAdornment={
showCrossIcon && (
<IconButton
sx={{ visibility: value ? 'visible' : 'hidden', position: 'absolute', right: '20px', zIndex: '1' }}
disableRipple
onClick={() => {
onChange('');
}}
>
<CrossIcon />
</IconButton>
)
}
sx={{ paddingRight: '0px' }}
>
{options.map((item) => {
const isLabelValueOption =
typeof item === 'object' && item.hasOwnProperty('label') && item.hasOwnProperty('value');
const optionLabel = isLabelValueOption ? item.label : item;
const optionValue = isLabelValueOption ? item.value : item;
return (
<MenuItem key={optionLabel} value={optionValue} className="menu-item">
<div data-testid="menu-items" className="multi-select">
<OverflowText sx={{ margin: '0px' }}>{optionLabel}</OverflowText>
</div>
</MenuItem>
);
})}
</Select>
它是一个可重用的组件。为了给出更多的上下文，下面是它的来源:
<SelectFormField
data-testid="timeGrain"
fieldType="Select"
fieldSize="medium"
tableSelect={true}
name="timeGrain"
label="Time Grain"
control={control}
options={timeGrainOptionsList}
defaultValue={R.pathOr('P1D', ['time', 'timeGrain', 'defaultValue'], configurationTemplate)}
required={R.pathOr(false, ['time', 'timeGrain', 'required'], configurationTemplate)}
/>
然后:
export const SelectFormField: React.FC<SelectProps & AdditionalFormFieldProps> = (props) => {
const { name, defaultValue, control } = props;
return (
<Controller
name={name}
control={control}
defaultValue={defaultValue}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<SelectField {...props} value={value} onChange={onChange} error={error} />
)}
/>
);
};
我遵循了MUI Select组件文档，给它一个占位符似乎是正确的方法。为什么不工作?
我认为问题是在renderValue功能。根据您的代码，当没有选择选项时，渲染值只会返回Placeholder文本。但是当有一个被选中的选项时，它将不返回任何东西。所以你要做的就是更新renderValue函数，如下所示:
renderValue={(selected) => {
if (!selected || selected.length === 0) {
return <em>Placeholder</em>;
} else if(Array.isArray(selected){
return selected.join(', ');
} else {
return selected
}
}}
只能在本地prop为false(默认)时使用。
签名:Function (value: any) =>ReactNodevalue:提供给组件的值。
<em></em>是反应节点吗?也许需要用括号括起来?您的值应该是MenuItem吗?