当用户输入任何内容时使用自动完成材料 UI 创建标签

Question

我可以输入一些内容来显示从下拉列表中选择的标签，但我希望用户可以输入一些内容并创建一个或多个以逗号分隔的标签。

我使用了一个useState钩子，它是一个数组。

const [tags, setTags] = useState([]);

我设置Autocomplete如下代码 -

const [tags, setTags] = useState([]);

Answer 1

令人惊讶的是，我在提问前尝试了一个小时。但提出问题后几分钟内解决它。这是解决方案 -

<Autocomplete
  style={{ margin: "10px 0" }}
  multiple
  id="tags-outlined"
  options={tags}
  defaultValue={[...tags]}
  freeSolo
  autoSelect
  onChange={(e) => setTags([...tags, e.target.value])}
renderInput={(params) => (
    <TextField
      {...params}
      label="Tags"
      placeholder="Tags"
      value={tags}
    />
  )}
/>;

输出将如下所示。 用户输入标签

但我想添加多个现在没有发生的标签，可以通过提供空格或逗号来放置。