如何将react-hook-form的ref与自定义TextField组件关联

要让React Hook Form正确控制自定义TextField并进行验证，核心是确保React Hook Form能获取到内部input元素的DOM引用，同时接收必要的表单事件。以下是两种可行的解决方案：

方案1：用forwardRef改造TextField，配合register直接使用 #

修改自定义TextField组件，通过React.forwardRef将外部传入的ref转发到内部的input元素，这样React Hook Form就能直接获取到input的DOM节点：

src/components/Fields.js

import React from "react";

function Label({ id, children }) {
  return (
    <label
      htmlFor={id}
      className="block mb-3 text-sm font-medium text-gray-700"
    >
      {children}
    </label>
  );
}

// 使用forwardRef包裹组件，接收ref作为第二个参数
export const TextField = React.forwardRef(({
  id,
  label,
  type = "text",
  className = "",
  ...props
}, ref) => {
  return (
    <div className={className}>
      {label && <Label id={id}>{label}</Label>}
      {/* 将转发的ref绑定到内部input */}
      <input id={id} ref={ref} type={type} {...props} />
    </div>
  );
});

// 给组件添加displayName，方便调试
TextField.displayName = "TextField";

然后在App.js中直接展开register的返回值，自动传递所有必要的属性（包括ref、name、事件处理函数等）：

src/App.js

import { TextField } from "./components/Fields";
import { useForm } from "react-hook-form";
import { useEffect } from "react";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  useEffect(() => console.log(errors), [errors])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        id="mytest"
        label="This is a test"
        placeholder="Placeholder"
        {/* 直接展开register返回的所有属性 */}
        {...register("mytest", { required: "mytest is a required field" })}
      />
      {/* 显示验证错误信息 */}
      {errors.mytest && <p className="text-red-500 text-sm">{errors.mytest.message}</p>}
      <input type="submit" />
    </form>
  );
}

方案2：使用Controller组件（适合受控组件场景） #

如果你的TextField是受控组件，或者需要更精细的表单控制逻辑，可以用React Hook Form提供的Controller组件来包装：

src/App.js

import { TextField } from "./components/Fields";
import { useForm, Controller } from "react-hook-form";
import { useEffect } from "react";

export default function App() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => console.log(data);

  useEffect(() => console.log(errors), [errors])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="mytest"
        control={control}
        rules={{ required: "mytest is a required field" }}
        render={({ field }) => (
          <TextField
            id="mytest"
            label="This is a test"
            placeholder="Placeholder"
            inputRef={field.ref}
            {/* 传递表单控制所需的属性 */}
            {...field}
          />
        )}
      />
      {errors.mytest && <p className="text-red-500 text-sm">{errors.mytest.message}</p>}
      <input type="submit" />
    </form>
  );
}

原写法失效的原因 #

你之前手动拆分name和ref传递的方式，缺少了register返回的onChange和onBlur事件处理函数，导致React Hook Form无法捕获输入变化，自然无法触发验证逻辑。使用展开运算符或Controller可以自动传递所有必要属性，确保表单控制正常运行。

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