reactjs - 选择上的 forwardRef 不会使用 react-hook-form 保存选择的值

Question

我正在构建一个反应组件库。

此文本字段通过传递一个refwith 来工作forwardRef：

export const TextField = React.forwardRef((props:TextFieldProps, ref) => {

return (
    <input ref={ref}....

但是，当我尝试使用 a 进行相同操作时select：

export const SimpleSelect = React.forwardRef((props: SimpleSelectProps, ref: Ref<HTMLSelectElement>) => {

const options = props.options

return (
  <select ref={ref}  className="Select">
    <option>-- Select an option --</option>
    {options &&
      options.map((option: OptionsType) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>

然后我在自己的应用程序中使用react-hook-form ，如下所示：

<form onSubmit={handleSubmit(onSubmit)}>
  <SimpleSelect
    {...register('thingId', { required: true })}
    title="Thing"
    options={
      things &&
      things.map(({ thing }: Thing) => ({
        value: thing.uid,
        label: thing.primaryName,
      }))
    }
  />

选择的选项不会保存，我可以看到当我提交表单时，即使选择了一个选项，它也会尝试提交“--选择一个选项--”。

Answer 1

您需要在select组件中传播 RHF 提供的 props 才能使您的控件正常工作。具体来说，select需要一个name属性，以便可以识别它，onChange以便 RHF 可以侦听选项更改事件：

<select ref={ref} className="Select" {...props}>