Material-UI <Autocomplete /> 标签与选项值不同

Question

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

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

自动完成的数据是一个对象数组，如下所示：

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

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

Answer 1

您可以在Material-UI Autocomplete

中自定义renderOption道具

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

Answer 2

如果你只是想在文本域中显示姓名，你可以试试这个

    getOptionLabel={option => option.id}
    renderOption={option => <>{option.name}</>}

如果您想在 TextField 和 OptionLabel 中显示名称，但想获取 id 作为 TextField 的值，以便在表单提交后存储 id。你可以试试这个

    getOptionLabel={(option) => option.name}
    renderOption={(option) => (
      <>
        {option.name} ({option.surname})
      </>
    )}
    onChange={(event, newValue) => {
      setValue(newValue);
      setCustomValue(newValue.id);
    }}

使用 onChange 事件，您可以 select 您想要获取的选项的任何字段，因为 value.In 在这个示例中，我将选项的 ID 存储在状态中。完整的工作示例在这里 https://codesandbox.io/s/material-demo-forked-wlzr8?file=/demo.js:804-1084

Material-UI <Autocomplete /> 标签与选项值不同

Material-UI <Autocomplete /> different label than option value

autocomplete

material-ui