在材料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的Autocomplete道具获得了可用于此的功能。