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

Question

我正在构建一个 React 组件库。

此文本字段通过传递 ref 和 forwardRef:

来工作

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

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

然而，当我尝试使用 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,
      }))
    }
  />

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

Answer 1

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

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

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

forwardRef on Select does not save chosen value with react-hook-form

reactjs

react-hook-form

react-forwardref