React Hook Form自定义输入组件无法正常工作问题排查

问题情况 #

按照React Hook Form官方示例编写了自定义Input组件，提交表单时获取到的值始终是undefined，但直接使用原生<input>标签时功能正常。相关代码及环境如下：

自定义Input组件（Input.tsx） #

import React from "react";

export default function Input({label, name, onChange, onBlur, ref}:any) {
    return (
        <>
        <label htmlFor={name}>{label}</label>
        <input
          name={name}
          placeholder="Jane"
          onChange={onChange}
          onBlur={onBlur}
          ref={ref}
        />
      </>
    );
}

使用示例 #

import {useAuth} from '../components/AuthContextProvider'
import { useForm, SubmitHandler } from "react-hook-form";
import Input from '../components/Input'

type Inputs = {
  name: string;
};

function Subscriptions({ Component, pageProps }: any) {
  const { user  } = useAuth()
  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = async data => {
    console.log(data, 'data sdfdsg')
  }

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Input label="name" {...register('name')}/>
        <button type='submit'>Add kid</button>
      </form>
    </>
    )
}

export default Subscriptions

使用的包版本 #

"react-hook-form": "^7.34.2"

问题原因及解决方法 #

你的自定义Input组件没有接收并传递value属性给内部的原生<input>标签。register方法返回的属性中包含value，用于同步表单控件的值，但组件没处理这个属性，导致原生input无法正确绑定表单状态，所以提交时获取不到输入值。

修改后的Input.tsx代码如下：

import React from "react";

export default function Input({label, name, onChange, onBlur, ref, value}:any) {
    return (
        <>
        <label htmlFor={name}>{label}</label>
        <input
          name={name}
          placeholder="Jane"
          onChange={onChange}
          onBlur={onBlur}
          ref={ref}
          value={value}
        />
      </>
    );
}

添加value参数并传递给内部input后，组件就能正确同步表单的值，提交时就能获取到用户输入的内容了。

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