如何让 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 (将#修改为@）