forwardRef封装的Select组件接入react-hook-form时无法保存选中值如何解决

问题原因 #

你封装的SimpleSelect组件没有将react-hook-form的register方法返回的onChange、value、onBlur等核心属性透传给原生<select>标签，导致表单库无法监听到下拉框的选择变化，也无法同步选中值，因此提交时始终读取到初始默认值。

修复方案 #

1. 调整SimpleSelect组件逻辑，透传原生属性

将组件自定义属性（options、title等）解构后，剩余所有属性全部展开传递给原生select元素，同时给默认选项补充空值声明：

export const SimpleSelect = React.forwardRef((props: SimpleSelectProps, ref: Ref<HTMLSelectElement>) => {
  // 解构自定义属性，剩余属性全部透传给原生select
  const { options, title, ...nativeProps } = props;
  return (
    <select 
      ref={ref}  
      className="Select"
      {...nativeProps} // 透传react-hook-form注入的onChange、value等属性
    >
      {/* 给默认选项设置空value，匹配表单初始状态 */}
      <option value="">-- Select an option --</option>
      {options?.map((option: OptionsType) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  )
})
SimpleSelect.displayName = 'SimpleSelect';

2. 修正TS类型定义（TS项目必填）

确保SimpleSelectProps继承原生select的属性类型，避免类型报错：

import type { SelectHTMLAttributes } from 'react';

type SimpleSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
  options: OptionsType[];
  title?: string;
  // 其他自定义属性在此处补充
}

之前封装的TextField能正常使用，是因为你写输入框组件时已经默认透传了所有原生属性，只是贴出的代码片段没有展示这部分逻辑。

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