时间戳

首页 > 解决方案 > 如何在材料 UI 中的自动完成之外删除选定的芯片

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

问题描述

所以我想在in<Chip />之外显示选定的值。我能够将值显示为. 但是，我仍然无法删除这些芯片，即不仅显示，而且还更改了. 有人有想法吗？<TextField /><Autocomplete />stateselected<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>
  );
}

完整代码在这里

标签： javascriptreactjsautocompletematerial-uimulti-select

解决方案

你需要两件事：

  1. 中的适当逻辑，onDelete例如Chip：
      onDelete={() => {
        setVal(val.filter(entry => entry !== option));
      }}
  1. 在 上指定值（您已经在状态中管理）Autocomplete：
      <Autocomplete
        value={val}
        // ... other properties
      />

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

推荐阅读