javascript - 如何使用 Material-UI Autocomplete 组件选择多个选项并添加新选项？

Question

目标
我有一个多个字段:

我们可以选择自动完成中存在的用户(我通过 API 检索的列表)

我们可以输入新用户的名字，我们用逗号分隔他们

为此，我需要检索 的值值(value) 和 输入值 .对于 值(value) , 没有问题，除了 输入值 , 有一点不明白
问题
当我修改 的值时输入值 在onInputChange中，其状态被修改和重置 like that
资讯
我基于 the example that material UI offers
Code in Sandbox
代码

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

interface User {
  id: number;
  name: string;
}

const userList: User[] = [
  { id: 1, name: "name 1" },
  { id: 2, name: "name 2" },
  { id: 3, name: "name 3" }
];

export default function AutocompleteControlled() {

  const [users, setUsers] = React.useState<number[]>([]);
  const [inputValue, setInputValue] = React.useState("");

  return (
    <div>
      <br />
      <Autocomplete
        multiple
        value={userList.filter((el) => users.includes(el.id))}
        onChange={(event: any, newValue: User[]) => {
          setUsers(newValue.map((el) => el.id));
        }}
        inputValue={inputValue}
        onInputChange={(event: any, newInputValue: string) => {
          console.log("newInputValue", newInputValue);
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={userList}
        getOptionLabel={(option) => option.name}
        renderInput={(params) => (
          <TextField {...params} label="Controllable" variant="outlined" />
        )}
      />
    </div>
  );
}

欢迎所有评论:)

Answer 1

您想启用多选，并允许用户在文本框中输入任意值。因此，您可以使用 Autocomplete freesolo 的组件prop 设置为 true，因此文本框可以包含任意值。
This是最接近您的用例的 Material-UI 示例。
我们将使用受控组件，因此您可以使用 value 来控制其行为。和 onChange Prop 。检查下面的代码。
您可以从预先填写的项目中进行选择，也可以输入任意值并按回车键，将向组件添加一个芯片，并将该值添加到该状态的数组中。
目前value是名称数组，但您可以将其设置为 id s 或任何你想要的。
试试这个代码:

import React from "react";
import Chip from "@material-ui/core/Chip";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: 500,
      "& > * + *": {
        marginTop: theme.spacing(3),
      },
    },
  })
);

interface User {
  id: number;
  name: string;
}

const userList: User[] = [
  { id: 1, name: "name 1" },
  { id: 2, name: "name 2" },
  { id: 3, name: "name 3" },
  { id: 4, name: "name 4" },
  { id: 5, name: "name 5" },
];

export default function AutocompleteControlled() {
  const classes = useStyles();

  const [value, setValue] = React.useState<any>([userList[0].name]);

  console.log("value: ", value);

  return (
    <div className={classes.root}>
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        multiple
        id="tags-filled"
        options={userList.map((option) => option.name)}
        freeSolo
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip
              variant="outlined"
              label={option}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="filled"
            label="Users"
            placeholder="Search"
          />
        )}
      />
    </div>
  );
}

这就是它的外观，受控值记录到控制台。