material ui 中的自定义输入自动完成不起作用

Question

我可以通过从列表中选择值来使用自动完成功能。现在我想在选择中添加一个新值。我尝试了多个选项，包括 onChange 但无法实施。

如果用户输入内容并在文本框外单击，它应该将自由文本转换为标签。此外，允许用户继续从预定义的 list/free 文本中添加更多标签。

我正在尝试 here 选项，但没有成功。这是可能的还是我需要寻找其他选择？

Answer 1

为了使用 Autocomplete 添加新项目，您应该使用 Autocomplete 的 freeSolo 属性。此功能使您可以选择自动使用输入中的值并将其添加到 Autocomplete.

的值中

freeSolo 的问题是当您有复杂的对象（而不仅仅是字符串）时。

有多种方法可以解决这个问题。

选项 #1 - 如果复杂对象只是预先存在的值，您可以使用它来显示正确的值：

<Autocomplete
  freeSolo
  getOptionLabel={option => option.title || option}
  ...
/>

如果您没有 option.title（默认的 freeSolo 就是这种情况，因为值只是文本，而不是对象）- 只需显示 option.
您可以在这里找到一个工作示例：https://codesandbox.io/s/mui-autocomplete-create-complex-4mk5v?file=/demo.js

选项 #2 - 如果您确实需要复杂的对象：

You will need to manage adding/removing the objects by yourself.

Autocomplete 的 onChange 道具获得了一个可以用于此目的的函数。

Answer 2

freeSolo 允许您自由输入，但不允许您将值注册为选项（https://material-ui.com/api/autocomplete/ 查找“autoselect”）。这是解决方案：

<Autocomplete
    options={options}
    freeSolo
    autoSelect

Autocomplete with custom input in material ui not working