在反应中按下文本字段@mui内的输入后如何将文本转换为标签

Question

正如您在图片中看到的，当用户键入内容时，会打开一个包含给定选项（预定义数组）的下拉菜单。选择任何选项后，它会将所选选项转换为标签。

我想达到同样的目的，但我不想提供列表。任何用户类型都应在按下 enter

后转换为标签

Answer 1

我猜你需要这个。这是一个没有任何列表选项的免费单人自动完成。我为你做了这个example in codeSandBox。

    import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";

export default function LimitTags() {
  return (
    <Autocomplete
      multiple
      id="tags-filled"
      options={[]}
      defaultValue={[top100Films[13].title]}
      freeSolo
      renderInput={(params) => (
        <TextField
          {...params}
          variant="filled"
          label="freeSolo"
          placeholder="Favorites"
        />
      )}
    />
  );
}

在反应中按下文本字段@mui内的输入后如何将文本转换为标签

how can I convert text to tag upon pressing enter inside textfield @mui in react

select

textfield

reactjs

material-ui