Question

因此，我想将所选值显示为<Chip />中<TextField />之外的<Autocomplete />。我能够将值显示为state。但是，我仍然无法删除这些筹码，即不仅要删除显示器，还要更改selected中的<Autocomplete />属性。有人有主意吗？

  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>
  );
}

完整的代码here

Answer 1

您需要两件事：

onDelete的{{1}}中的适当逻辑，例如：

Chip

在onDelete={() => { setVal(val.filter(entry => entry !== option)); }}上指定值（您已经在状态中管理该值）：

Autocomplete

这是您的沙盒的有效版本：https://codesandbox.io/s/autocomplete-with-chips-85rqq

如何在材料UI中的“自动完成”之外删除选定的芯片

1 个答案: