reactjs - 在材料 ui 中使用自定义输入自动完成功能不起作用

Question

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

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

我正在尝试这里的选项，但没有运气。这甚至可能还是我需要寻找其他选择？

标签： reactjsautocompletematerial-uireact-component

Answer 1

为了添加新项目，Autocomplete您应该使用 的 freeSolo 属性Autocomplete。此功能使您可以选择自动使用输入中的值并将其添加到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 - 如果您确实需要复杂的对象：

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

的onChangepropAutocomplete获取一个可以用于此目的的函数。