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

Question

我正在尝试使用 RHF 和 react-select 构建一个带有自定义通用组件的表单。

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

虽然它看起来不是很复杂，但我做错了，我一直对 RHF Controller 的使用和 Select 道具感到困惑。

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

这是一个代码框

谢谢您的帮助。

Answer 1

您的选项是 label 值 object 的数组。 因此，当您设置选项时，它将从该选项数组中将其设置为选定的 object。 如果您只想将字符串存储在您正在设置的 userData 中，那么只需执行以下操作：

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

在您的 SelectField > SelectWrapper 组件中

希望我得到了你的要求。