在材料ui中使用自定义输入自动完成

Question

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

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

我正在尝试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-如果您确实需要复杂的对象：

您将需要自行管理添加/删除对象。

onChange的{​​{1}}道具获得了可用于此目的的功能。