Material-UI <Autocomplete /> 如何使用不同于选项值的标签？

Question

我有一个使用的Material-UI <Autocomplete />组件，您可以在其中输入某人的名称，它会提供一个选择列表。这是一个相当标准的用例，然而，我需要表单中所选项与标签不同。

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

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

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

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

- Jonah Snider

Answer 1

你可以在 Material-UI 的 Autocomplete 中自定义 renderOption 属性。

渲染选项，使用 getOptionLabel 作为默认方法。
签名: function(option: T, state: object) => ReactNode
option: 要渲染的选项。
state: 组件的状态。

至于代码部分：

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

在官方文件中参考演示

- keikai

Answer 2

如果您只想在文本字段中显示名称，您可以尝试这个方法。

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

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

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

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

- Bilal Zahoor