React select - разные метки для выпадающего списка и для поля ввода

Question

Можно ли (по умолчанию) указать одну метку для опций выпадающего списка с реакцией и выбрать другую метку в поле ввода после выбора одной из опций выпадающего списка.

Например, если я иметь следующий объект:

{label: "David Smith", selectLabel: "Dave",  value: 1}

Возможно ли по умолчанию иметь его, чтобы в раскрывающемся списке отображалось label, а после того, как я сделал выбор, в поле ввода отображается selectLabel?

Говоря «по умолчанию», я имею в виду, есть ли где-нибудь опора или что-то, что позволило бы мне указывать значения для выпадающего списка и поля ввода отдельно?

Так что в основном я ищу что-то подобное :

и после выбора я хочу, чтобы в поле ввода отображался «Дейв» (а не «Дэвид Смит»):

Answer 1

Вы можете использовать formatOptionLabel для достижения этого результата.

<Select
   name="color"
   options={colourOptions}
   formatOptionLabel={(option, { context }) => {
     /* context can be either `menu` or `value`
        menu - dropdown
        value - value displayed
     */
     return context === 'menu' ? option.label : option.color;
   }}
/>

Codesandbox

Документы