Материал-UI метка, отличная от значения опции - PullRequest
0 голосов
/ 29 февраля 2020

У меня есть компонент Material-UI <Autocomplete />, который я использую, где вы можете ввести чье-то имя, и он предоставит список людей, из которых можно выбрать. Это довольно стандартный вариант использования, однако мне нужно, чтобы выбранный элемент в форме отличался от метки.

В настоящее время, если вы выберете запись с пометкой "Джон Смит", текстовое поле будет заполнено " Джон Смит". Вместо этого я хочу заполнить текстовое поле идентификатором этого пользователя.

Данные для автозаполнения представляют собой массив таких объектов:

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

Как сделать так, чтобы компонент автозаполнения помещал идентификатор пользователя в текстовом поле вместо метки пользователя?

1 Ответ

1 голос
/ 29 февраля 2020

Вы можете настроить renderOption реквизитов в Material-UI Autocomplete

Отрисовать опцию, использовать getOptionLabel по умолчанию.
Подпись : function(option: T, state: object) => ReactNode
опция : опция рендеринга.
состояние : состояние компонента.

Что касается кода

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

См. Демоверсию 1024 * в официальном документе

...