如何解决自动填充组件可以具有不同的值和选项类型吗?
根据文档,Autocomplete组件在选项和实际值之间没有区别。
我有一个带有ID的对象选项列表。当我选择一个选项时,我想获取其ID作为值,而不是对象本身。另外,当我设置“自动完成”的值时,我只想传递id。
有可能吗?
<Autocomplete
options={[{id: 1,label: 'foo'},{id: 2,label: 'bar'}]}
value={1}
onChange={(_,value) => { /* value should be number (id) */ }}
/>
更新:选项标签应保持可配置状态
解决方法
很遗憾,onChange
事件的值返回选择的options
之一。因此不可能只返回元素的一个属性。
您唯一可以做的就是拿value.id
:
<Autocomplete
options={[
{ id: 1,label: "foo" },{ id: 2,label: "bar" }
]}
getOptionLabel={(option) => option.label} // this to show label on Autocomplete
getOptionSelected={(option,value) => option.id === value.id} // this to compare option on id value
onChange={(event,value) => console.log(value.id)} // here access to id property of value object
...
/>
Here一个代码框示例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。