如何解决如何让 Material-UI AutoComplete renderOption 为选定的值工作?
Material-UI 自动完成组件让您可以使用一组选项并像这样转换选项:
您有一组选项对象:[{option},{option}.....{option}]
我使用 prop 函数 renderOption={option => option.title}
将选项列表作为选项的标题,我想使用选项的 id 作为传递给表单处理程序的实际值,所以我使用内置的函数getoptionLabel={option => `${option.id}`}
。这一直有效,直到我选择一个选项。输入中的文本显示 id,而不是标题。如何将输入的标签作为选项的标题,并且仍然将 id 作为值传递?
领域
```
<Field
classes={classes}
name={field}
label={titleCase(field)}
InputLabelProps={{
classes: {
root: classes.label,shrink: 'shrink'
}
}}
component={renderAutoCompletedatafield}
renderOption={(option )=> option[fieldProp]}
getoptionLabel={(option => `${option.id}`)}
options={choices}
/>
renderAutoComplete 函数
export const renderAutoCompletedatafield = ({ options,nonfilter,renderOption,getoptionSelected,getoptionLabel,classes,input,onChange,label,fullWidth,value,defaultValue,...custom }) => {
return (
<Autocomplete
options={options}
getoptionLabel={getoptionLabel}
renderOption= {renderOption}
getoptionSelected={getoptionSelected}
onSelect={onChange}
classes={{
listBox: classes.listBox,input: classes.input,option: classes.option
}}
renderInput={(params) => (
<TextField
{...params}
label={label}
size="small"
color="secondary"
variant="outlined"
fullWidth={fullWidth}
InputProps={{
...params.InputProps,className: classes.listBox,input: classes.input
}}
InputLabelProps={{ className: classes.label }}
{...input}
{...custom}
/>
)}/>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。