Как отправить только значение выбранной опции с помощью response-select и response-hook-form

Я пытаюсь создать форму с настраиваемыми универсальными компонентами, используя RHF и response-select.

Когда я отправляю форму, я хочу, чтобы select давал мне 'option-1' вместо { value: 'option-1', label: 'Option 1' }.

Хотя это не кажется очень сложным, я не могу понять это правильно и все время путаюсь в использовании контроллера RHF и Select props.

Из-за общего подхода я не хочу преобразовывать данные на уровне формы и хотел бы сохранить логику в компоненте SelectField.

Вот codeandbox.

Спасибо за помощь.


reactjs typescript yup react-hook-form react-select
person RebootGG    schedule 07.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваши параметры - это массив объекта значения метки. Поэтому, когда вы устанавливаете параметр, он будет установлен как выбранный объект из этого массива параметров. Если вы хотите сохранить только строку в устанавливаемых вами userData, просто выполните:

            onChange: (item): void => onChange(item.value),

в вашем SelectField ›компоненте SelectWrapper

https://codesandbox.io/s/wizardly-moore-qsil7?file=/src/SelectField.tsx

Надеюсь, я правильно понял ваш запрос.

person justdvl    schedule 07.12.2020
comment
Действительно, отлично работает, спасибо! Я оставлю ошибки TypeScript на завтра;) - person RebootGG; 07.12.2020