React Select结合Form Hook Form提交异常：添加onChange后无法获取选中值

问题原因 #

你添加自定义onChange时，直接覆盖了Controller传递的field.onChange方法——Form Hook Form正是靠这个方法把选中值同步到表单内部状态的。一旦覆盖，表单状态无法更新，提交自然拿不到最新的选中值。

解决办法 #

不要直接替换onChange，而是在自定义逻辑里先调用field.onChange同步表单状态，再处理你的业务逻辑：

<Controller
  name="CostCenterGrp"
  className="form-control"
  control={control}
  render={({ field }) => (
    <ReactSelect
      {...field}
      isClearable
      options={costCenterHeads}
      onChange={(selectedOption) => {
        // 先同步Form Hook Form的表单状态
        field.onChange(selectedOption);
        // 这里写你的自定义逻辑，比如打印、联动其他组件等
        console.log("选中项：", selectedOption);
      }}
    />
  )}
/>

注意事项 #

• 别单独给React Select传value，{...field}已经包含了Form Hook Form管理的value，自动同步即可
• 如果非要自定义value，必须保证它和field.value完全一致，不然会出现状态不同步的问题

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