最新版react-hook-form搭配Material-UI TextField的register使用与错误处理

问题核心原因 #

你之前的写法绑定失效，本质是 Material-UI 的 TextField 不是原生HTML input元素，无法直接通过展开 register 返回的属性完成绑定：

• register 方法返回的 ref、onChange、onBlur 属性是为原生DOM元素设计的
• MUI 的 TextField 会把接收到的自定义属性挂载到最外层的包装div上，不会传递给内部真正接收用户输入的 <input> 节点
• 这种情况下值绑定、事件监听、校验逻辑都无法正常触发，提交时拿不到字段值，错误状态也无法同步。

官方推荐实现方案 #

对于非原生的第三方UI组件库，react-hook-form 提供了专门的桥接组件 Controller，用来打通表单状态和UI组件的连接，实现步骤如下：

1. 从 useForm 的返回值中取出 control 对象，作为表单上下文传递给Controller
2. 将原本写在 register 里的校验规则，移到 Controller 的 rules 属性上
3. 通过Controller的render属性拿到适配好的字段参数，直接展开传给TextField组件
4. 错误状态、提示信息直接从 formState.errors 中读取即可

对应的可运行代码：

import { TextField } from "@material-ui/core";
import React from "react";
import { useForm, Controller } from "react-hook-form";
import "./styles.css";

interface IMyForm {
  vasarlo: string;
}

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

  const onSubmit = (data: IMyForm) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <Controller
        name="vasarlo"
        control={control}
        rules={{ required: "error text" }}
        render={({ field }) => (
          <TextField
            {...field}
            variant="outlined"
            margin="none"
            label="Test"
            error={!!errors?.vasarlo}
            helperText={errors?.vasarlo ? errors.vasarlo.message : null}
          />
        )}
      />
      <input type="submit" />
    </form>
  );
}

这种写法可以覆盖所有需求场景：

• 输入框的值会自动同步到react-hook-form的表单状态中
• 配置的必填校验规则会在输入、失焦时自动触发
• 校验失败时错误信息会准确存到errors对象中，驱动TextField的错误样式和提示文案展示
• 提交时handleSubmit会自动收集所有绑定的字段值，校验不通过时不会触发onSubmit逻辑。

简易替代方案（仅适合简单场景） #

如果不想引入Controller，也可以利用MUI TextField专门暴露的inputRef属性，手动绑定register拿到的真实input引用：

// 从register方法中解构出需要的属性
const { ref, onChange, onBlur } = register("vasarlo", {
  required: "error text"
});

// 把ref绑定到inputRef属性上，不要直接展开所有register返回的内容
<TextField
  inputRef={ref}
  onChange={onChange}
  onBlur={onBlur}
  variant="outlined"
  margin="none"
  label="Test"
  error={!!errors?.vasarlo}
  helperText={errors?.vasarlo ? errors.vasarlo.message : null}
/>

注意：这种手动对接的方式只适合TextField这类简单的单输入框场景，如果是MUI的Select、RadioGroup、复选框组这类复杂组件，手动对接很容易遗漏事件参数，长期维护的项目优先选Controller的实现方案。

常见踩坑提醒 #

• 不要直接把register返回的所有属性展开传给TextField，这些属性会被MUI挂载在外层div上，无法触达内部真实的input节点
• 校验规则要放在react-hook-form对应的属性上（Controller的rules、register的第二个参数），不要自定义写在TextField的属性里，否则表单感知不到
• 不要给TextField手动维护独立的state存输入值，所有字段值的同步都交给react-hook-form处理，避免双向绑定不一致

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