Javascript 如何在material UI中的Autocomplete之外删除选定的芯片

因此，我想在

中的
之外将所选值显示为
，您需要两件事：

芯片的
onDelete
中的适当逻辑，例如：

在
自动完成
上指定值（您已在状态中管理该值）：
谢谢您的回答。但这只解决了问题的一半。棘手的部分是在自动完成中切换要删除的元素的“选择”属性。“自动完成”内部API对数据源/选项中的每个元素使用“选择”，但这只停留在组件的范围内，API让我非常困惑。@user2683470我已更新了答案，通过指定
值
属性来解决问题的另一半。
  const [val, setVal] = useState([]);

  const valHtml = val.map((option, index) => (
    <Chip
      label={option.title}
      deleteIcon={<RemoveIcon />}
      onDelete={() => {}}
    />
  ));

  return (
    <div>
      <Autocomplete
        multiple
        filterSelectedOptions
        options={top100Films}
        onChange={(e, newValue) => setVal(newValue)}
        getOptionLabel={option => option.title}
        renderTags={() => {}}
        renderInput={params => (
          <TextField
            {...params}
            variant="standard"
            placeholder="Favorites"
            margin="normal"
            fullWidth
          />
        )}
      />
      <div className="selectedTags">{valHtml}</div>
    </div>
  );
}

      onDelete={() => {
        setVal(val.filter(entry => entry !== option));
      }}

      <Autocomplete
        value={val}
        // ... other properties
      />