javascript - Material UI 自动完成功能未按预期工作，不接受逗号

Question

下面是他们的文档示例。我试图允许用户使用逗号，从下拉列表中选择多个值。

如果输入是Part 1，则组件可以正常工作，但如果输入是Part 1, Part 2，或者只是1,2，那么组件似乎认为没有可供选择的选项。

我试过添加freeSolo道具，但没有奏效。

这里发生了什么？

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

export default function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      multiple
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { label: "Part 1", year: 1994 },
  { label: "Part 2", year: 1972 },
  { label: "Part 3", year: 1974 },
];

标签： javascriptreactjsmaterial-ui

Answer 1

对于将来来到这里的任何人，我设法通过添加filterOptions道具来解决这个问题。