reactjs - 如何将寄存器传递给 React Hook Forms Factory 组件？

Question

我正在尝试创建一个这样的“工厂”：这有效：

<>
  <span className={classes.p}>{"test"}</span>
  <input ref={register} className={classes.input} name="legal_name_1" />
</>

但是，当我将输入包装在组件中的函数中时，它不起作用：

const MyInput = ({ name, register, ...props }) => {
 return (
  <>
  <span className={classes.p}>{AllDisasterAppFields[name]}</span>
  <input ref={register} className={classes.input} name={name} {...props} />
  </>
 );
};

<MyInput register={register} name= name="legal_name_1" {...props} />

有任何想法吗？

Answer 1

我了解您想register作为道具传递。如果我是对的，那么您必须像这样编写代码（不要使用ref属性但是这个{...register(name)}）：

 const MyInput = ({ name, register, ...props }) => {
       return (
          <>
          <span className={classes.p}>{AllDisasterAppFields[name]}</span>
          <input {...register(name)} className={classes.input} name={name} {...props} />
      </>
     );
    };
    
<MyInput register={register} name="legal_name_1" {...props} />