material ui 中的自定义输入自动完成不起作用
Autocomplete with custom input in material ui not working
我可以通过从列表中选择值来使用自动完成功能。现在我想在选择中添加一个新值。我尝试了多个选项,包括 onChange
但无法实施。
如果用户输入内容并在文本框外单击,它应该将自由文本转换为标签。此外,允许用户继续从预定义的 list/free 文本中添加更多标签。
我正在尝试 here 选项,但没有成功。这是可能的还是我需要寻找其他选择?
为了使用 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
道具获得了一个可以用于此目的的函数。
freeSolo 允许您自由输入,但不允许您将值注册为选项(https://material-ui.com/api/autocomplete/ 查找“autoselect”)。这是解决方案:
<Autocomplete
options={options}
freeSolo
autoSelect
我可以通过从列表中选择值来使用自动完成功能。现在我想在选择中添加一个新值。我尝试了多个选项,包括 onChange
但无法实施。
如果用户输入内容并在文本框外单击,它应该将自由文本转换为标签。此外,允许用户继续从预定义的 list/free 文本中添加更多标签。
我正在尝试 here 选项,但没有成功。这是可能的还是我需要寻找其他选择?
为了使用 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
道具获得了一个可以用于此目的的函数。
freeSolo 允许您自由输入,但不允许您将值注册为选项(https://material-ui.com/api/autocomplete/ 查找“autoselect”)。这是解决方案:
<Autocomplete
options={options}
freeSolo
autoSelect