如何从React Select中获取选项值？结合React Hook Form的代码问题排查求助

嘿，我看了你的代码，问题出在React Hook Form的Controller和React Select的结合方式上——你没有正确把Select的选中状态同步回表单，所以只能拿到默认值。让我一步步帮你修正：

核心问题点 #

• Controller的render参数用错了：你在render里解构了register，但Controller的render回调提供的是field对象，里面包含控制表单字段的onChange、name等关键属性，不是直接的register。
• 缺少值同步逻辑：React Select的选中变化需要手动通过field.onChange传递给React Hook Form，不然表单状态不会更新。

修正后的完整代码 #

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]
const { register, handleSubmit, watch, formState: { errors }, control } = useForm();
const onSubmit = (data, e) => {
  e.preventDefault();
  console.log(data); // 现在能正常打印选中的stocktype值了
}

// 修正后的Controller组件
<Controller
  name='stocktype'
  control={control}
  defaultValue={options[0].value} // 存储字符串value，更符合表单常规用法
  render={({ field }) => (
    <Select
      options={options}
      styles={customStyles}
      noOptionsMessage={() => 'Aramanıza uygun değer bulunamadı'}
      placeholder={'Stok Tipi Seçiniz'}
      // 匹配表单存储的value到对应的选项对象
      value={options.find(option => option.value === field.value) || null}
      // 把选中选项的value同步到表单
      onChange={(selectedOption) => field.onChange(selectedOption.value)}
      // 绑定表单字段名
      name={field.name}
    />
  )}
/>

可选：如果需要存储整个选项对象 #

如果你希望表单里存储的是完整的选项对象（而不是仅value字符串），可以这么改：

<Controller
  name='stocktype'
  control={control}
  defaultValue={options[0]} // 默认值设为完整选项对象
  render={({ field }) => (
    <Select
      options={options}
      styles={customStyles}
      noOptionsMessage={() => 'Aramanıza uygun değer bulunamadı'}
      placeholder={'Stok Tipi Seçiniz'}
      value={field.value} // 直接用表单里存储的对象
      onChange={(selectedOption) => field.onChange(selectedOption)} // 同步整个对象
      name={field.name}
    />
  )}
/>

关键提醒 #

React Select是自定义组件，不能像原生input那样直接用register，必须通过Controller的field.onChange来桥接UI变化和表单状态——这是让表单能捕获选中值的核心步骤。

内容的提问来源于stack exchange，提问作者Melike Kozan