材质UI自动完成清除选择时的值

Question

我正在尝试清除选择后立即在输入字段中选择的值。 它会在模糊时清除，但在选择时不会清除。

<Autocomplete
  disabled={showTextField}
  className="center-vertically"
  options={listOfDependencies.sort()}
  style={{ width: 500 }}
  onChange={addDependency}
  value={value}
  onKeyPress={(event: React.KeyboardEvent) => {
    if (event.key == "Enter") {
      event.preventDefault();
      addDependency;
    }
  }}
  renderInput={params => (
    <TextField
      {...params}
      value={value}
      label="Select dependency"
      variant="outlined"
      defaultValue={[listOfDependencies[0]]}
      fullWidth
    />
  )}
/>

Answer 1

在options数据上写一个过滤器就可以了

const [select, setSelect] = React.useState(null);
const addDependency = (e, value) => {
  setSelect(value)
}

options={listOfDependencies.filter(x => !select || select.title !== x.title)}

完整代码可在在线演示中找到：

https://stackblitz.com/edit/mppyj9?file=demo.js