微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何让 Material-UI AutoComplete renderOption 为选定的值工作?

如何解决如何让 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 举报,一经查实,本站将立刻删除。