如何仅使用 react-select 和 react-hook-form 发送 selected 选项的值

Question

我正在尝试使用 RHF 和 react-select.

构建带有自定义通用组件的表单

当我提交表单时，我希望 select 给我 'option-1'，而不是 { value: 'option-1', label: 'Option 1' }。

虽然看起来不是很复杂，但我无法正确理解，我一直对 RHF 控制器的使用和 Select 道具感到困惑。

由于通用方法，我不想在表单级别转换数据，并希望将逻辑保留在 SelectField 组件中。

这是一个codesandbox

感谢您的帮助。

Answer 1

您的选项是标签值对象数组。因此，当您设置选项时，它会将其设置为从此选项数组中选择的对象。 如果您只想将字符串存储在您设置的 userData 中，那么只需执行以下操作：

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

在您的 SelectField > SelectWrapper 组件中

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

希望我没听错。