我正在使用React和material-ui..我刚刚意识到当我尝试提交表单时,Autocomplete组件会发出警告,所以我尝试做一些非常基本的事情,就像文档中一样:
let Form = props => {
return(
<form noValidate onSubmit={handleSubmit} >
<Autocomplete
id="combo-box-demo"
options={[{id:1,name:"test"},{id:2, name:"test2"}]}
getOptionLabel={(option) => option.name}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
当我尝试提交表单时,我得到以下错误:
材料-UI:提供给自动完成的值无效。没有一个选项与{"id":1,"name":"test"}
匹配。您可以使用getOptionSelected
属性自定义相等测试。
我还意识到,如果我在组件的状态下设置选项,则不会有任何警告(只是当它们被设置为常量时)。所以我想知道你们中的一些人是否对这种行为有任何想法?提前非常感谢。
8条答案
按热度按时间zdwk9cvp1#
基本上,您收到警告的原因是4.x.x版本中
getOptionSelected
的默认实现:在您的情况下,选择一个值会发生以下比较:
显然,在某些情况下它可以是
true
,在这个特定的例子中,它是false
,因为对象指向不同的示例。**解决方案!**需要覆盖
getOptionSelected
实现:**[更新]**注意,在版本5.x.x中, prop 被重命名为:
dba5bblo2#
版本5.0
2vuwiymt3#
另外,当您希望构建一个搜索器,其中您写入的值不必与选项相同时,您可以将
freeSolo
设置为true,警告将消失snvhrwxg4#
这是有效的,
https://github.com/mui-org/material-ui/issues/18514#issuecomment-606854194
szqfcxe25#
关于elVengadors Answer:
如果您希望构建一个搜索器,而您在框中键入的值(
inputValue
)不一定是提供的选项之一,则可以将freeSolo
设置为true。这将停止显示警告消息。
如果您正在创建允许异步查询API的组件,则可能会出现此需求。这将导致
options
的值根据API的响应而更改,但在更改inputValue
以查询API之前已经选择的选项可能不会包含在此新选项列表中。在Autocomplete Component Documentation中,
freeSolo
被描述为:如果为true,则自动完成是单独自由的,这意味着用户输入不绑定到提供的选项。
奖金
将
freeSolo
设置为true
将删除弹出按钮(自动完成组件右侧的下拉箭头)。要保留此按钮,还应添加forcePopupIcon={true}
。nimxete26#
我在添加getOptionSelected错误后遇到了同样的问题。
错误:
**解决方案:**新增getOptionSelected属性
ztigrdn87#
在我的例子中,我使用自定义选项,并且只将值存储在表单数据中
我保留选项
而
onChange
仅存储value
部分选项mum43rcc8#
我认为你不应该使用
<form>
来 PackageAutoComplete
组件。你应该为AutoComplete
设置值,并使用一个函数来处理单击按钮提交。试试这个: