从react-hook-form 6升级到7.33：inputRef注册代码如何修改？

React Hook Form 从 v7 开始彻底改变了 register 的用法，不再支持直接传入 DOM ref 作为参数，必须通过调用 register() 返回的属性集来绑定表单控件。针对你的场景，有两种调整方式：

方式一：直接使用 register 返回的 ref（推荐） #

这是 v7 官方推荐的写法，不需要手动处理 inputRef，同时可以额外保存 DOM ref 到你的自定义变量：

import { useForm, register } from "react-hook-form";

// 假设你的表单类型定义
type FormValues = {
  fieldName: string; // 替换成你的实际字段名
};

function YourForm() {
  const { register } = useForm<FormValues>();
  const refInputName = useRef<HTMLInputElement>(null);

  return (
    <input
      {...register("fieldName", {
        required: true,
        pattern: /^[a-z'\-\s]+$/i
      }, {
        // 自定义回调，将DOM ref同步到你的ref变量
        ref: (domRef) => {
          refInputName.current = domRef;
        }
      })}
    />
  );
}

方式二：适配第三方组件的 inputRef 场景 #

如果你的 input 是第三方 UI 组件（比如 AntD、MUI），需要通过 inputRef 传递 DOM ref，可以这样写：

import { useForm, register } from "react-hook-form";

type FormValues = {
  fieldName: string;
};

function YourForm() {
  const { register } = useForm<FormValues>();
  const refInputName = useRef<HTMLInputElement>(null);

  return (
    <SomeUIComponent
      inputRef={(ref: HTMLInputElement | null) => {
        if (ref) {
          // 调用register获取ref绑定函数，传入DOM ref
          const { ref: rhfRef } = register("fieldName", {
            required: true,
            pattern: /^[a-z'\-\s]+$/i
          });
          rhfRef(ref);
          // 同步到自定义ref变量
          refInputName.current = ref;
        }
      }}
    />
  );
}

关键变化说明 #

1. 必须指定字段名：v7 中 register 的第一个参数是必填的字段名，用来关联表单数据，这是和 v6 最大的区别之一。
2. register 返回属性集：调用 register() 会返回包含 ref、name、onChange、onBlur 的对象，通过扩展运算符绑定到 input 上，无需手动处理事件。
3. 自定义 ref 同步：如果需要保留原逻辑中保存 DOM ref 的需求，通过 register 的第三个配置参数的 ref 回调，或者在 inputRef 中手动调用 register 返回的 ref 函数即可。

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