如何选择已在自动完成材料 ui 中选择的值？答案

【问题标题】：How to select values that already selected in autocomplete material ui?如何选择已在自动完成材料 ui 中选择的值？
【发布时间】：2020-04-27 08:34:49
【问题描述】：

我正在使用 Material UI 自动完成功能，但遇到了这个问题。在documentation 中，它说“该值必须与选项具有引用相等性才能被选中”。我完全按照它所说的做了，但似乎它不起作用。

这是我的选择
这是我的价值
目前
预期

    <Autocomplete
     disableCloseOnSelect={true}
     multiple
     options={techList}
     getOptionLabel={(options) => options.techName}
     value={newValueDialog}
     onChange={(e, tech) => {
      this.handleChangeValueDialog(tech);
     }}
     popupIcon={false}
     closeIcon={false}
     renderTags={(value, getTagProps) =>
     value.map((option, index) => (
      <Chip
        color="primary"
        variant="outlined"
        label={option.techName}
        {...getTagProps({ index })}
        deleteIcon={<ClearIcon />}
      />
     ))
     }
  renderInput={(params) => (
    <TextField
      {...params}
      variant="outlined"
      placeholder="Technology"
      fullWidth
     />
   )}
/>

【问题讨论】：

标签： material-ui

【解决方案1】：

当您使用自定义对象时，请确保与您自己的实现相同。

https://material-ui.com/api/autocomplete/#autocomplete-api

你必须实现“getOptionSelected”方法

    getOptionSelected={(option, value) =>
      option.techName === value.techName
    }

https://codesandbox.io/s/material-demo-vh5ns

【讨论】：

codesandbox.io/s/angry-sound-5j4oy?file=/src/App.js 这是我的代码。我将 techList 和 valueTech 表单父组件传递给子组件。它在代码框中有效，但在我的代码中无效。
我已经解决了这个问题。我的 material-ui/lap 是旧版本。升级到最新版本，一切正常。谢谢。