React Hook Form结合React Select使用Controller时表单提交无法获取选中值

• 你自定义的onChange覆盖了Controller通过field透传的onChange方法：field.onChange是React Hook Form用来接收组件值更新、同步到表单状态的核心方法，你当前的逻辑仅更新了本地的selectValue状态，没有通知RHF值发生了变化，自然提交时拿不到对应字段的值。
• 你手动绑定了value={selectValue}，完全替换了field自带的和RHF表单状态绑定的value，等于切断了RHF到组件的状态同步链路，Controller没有起到管控组件值的作用。

方案1：无需单独维护本地状态（推荐） #

大部分场景下不需要自己单独存selectValue，直接使用Controller管控状态即可，代码修改为：

<Controller
  name="ShiftCaptain"
  control={control}
  render={({ field }) => (
    <Select
      {...field}
      options={options}
      placeholder="Select Person"
    />
  )}
/>

如果需要设置初始值，直接在调用useForm时的defaultValues里给ShiftCaptain字段设置对应初始值即可。

方案2：确实需要单独维护本地状态 #

如果你的业务逻辑需要单独用selectValue做其他处理，可以在自定义onChange里同时调用field.onChange把值同步给RHF：

<Controller
  name="ShiftCaptain"
  control={control}
  render={({ field }) => (
    <Select
      {...field}
      value={selectValue}
      options={options}
      placeholder="Select Person"
      onChange={(e) => {
        setSelectValue(e);
        field.onChange(e);
      }}
    />
  )}
/>

提示：如果只需要将选项的value值存入表单而非整个选项对象，调用field.onChange时传入e.value即可。

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