Question

我已经使用Material UI的自动完成组件来创建可搜索的选择输入。我将选项传递给它，它是所有可能选项的字符串数组。

<Grid item xs = {props.xs} className = {classes.formItem}>
    <Autocomplete
    multiple
    options = {props.options}
    disableCloseOnSelect
    getOptionLabel = {( option ) => option}
    renderOption = {( option, {selected} ) => (
      <React.Fragment>
      <Checkbox
        icon = {icon}
        checkedIcon = {checkedIcon}
        style = {{ marginRight: 8 }}
        checked = {selected}
        onChange = {props.onChange( option, selected )}
      />
        {option}
      </React.Fragment>
    )}
    renderInput = {( params ) => (
      <TextField {...params} variant = "outlined" label = {props.label} />
    )}
    />
  </Grid>

有时，我想从以前选择的api中获取选项。但是，当我将此选项列表传递给组件时，它不会在UI中显示已经选择了哪些选项。可以看出，根据我的“ edit”属性，我将组件的选定选项初始化为空数组或先前选定选项的数组

const [collaborators, setCollaborators] = React.useState( props.edit ? currentProject.collaborators : [] )

任何人都知道UI为何不显示所选选项？

谢谢

Answer 1

您好，如果有人遇到此问题，我会通过正确阅读文档来解决，自动完成组件包含defaultValue道具，可以将您希望从一开始就显示的选项数组传递给它。

物料UI可搜索的选择输入而不更新UI

1 个答案: