autocomplete - Material-UI 与选项值不同的标签

Question

我有一个 Material-UI <Autocomplete /> 组件，我正在使用它，您可以在其中输入某人的姓名，它将提供一个可供选择的人员列表。这是一个非常标准的用例，但是我需要表单中的所选项目与标签不同。

目前，如果您选择标有“John Smith”的条目，则文本字段将填充为“John Smith”。相反，我想用该用户的 ID 填充文本字段。

自动完成的数据是一个像这样的对象数组:

{ "name": "John Smith", "id": 123456789 }

如何让自动完成组件将用户 ID 放在文本字段而不是用户标签中？

Answer 1

您可以定制renderOption Material-UI 中的 Prop Autocomplete

Render the option, use getOptionLabel by default.
Signature: function(option: T, state: object) => ReactNode
option: The option to render.
state: The state of the component.

至于代码

getOptionLabel={option => option.name}
renderOption={(option) => <span>{option.name}</span>}

引用 demo在官方文件中