我有一个材质-UI<Autocomplete /> https://material-ui.com/components/autocomplete/我正在使用的组件，您可以在其中输入某人的名字，它将提供可供选择的人员列表。这是一个非常标准的用例，但是我需要表单中的所选项目与标签不同。
目前，如果您选择标记为“John Smith”的条目，则文本字段将填充“John Smith”。相反，我想用该用户的 ID 填充文本字段。
自动完成的数据是一个对象数组，如下所示：
{ "name": "John Smith", "id": 123456789 }
如何让自动完成组件将用户 ID 而不是用户标签放入文本字段中？
您可以定制渲染选项 https://material-ui.com/api/autocomplete/Material-UI 中的道具Autocomplete
渲染选项，默认使用getOptionLabel。
签名: function(option: T, state: object) => ReactNode
option：渲染选项。
state：组件的状态。
至于代码
getOptionLabel={option => option.name}
renderOption={(option) => <span>{option.name}</span>}
请参阅demo https://material-ui.com/components/autocomplete/#country-select在官方文件中
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
