React Hook Form封装MUI TextField出现Ref警告，如何解决？

出现这个警告的核心原因是：你封装的自定义函数组件默认不支持接收ref，但React Hook Form需要通过ref获取输入框的DOM元素来完成表单控制，因此需要用React.forwardRef()将ref转发给内部的MUI TextField组件。

错误示例（触发警告） #

import { TextField } from '@mui/material';
import { Controller } from 'react-hook-form';

const MuiTextField = ({ control, name, ...props }) => {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => <TextField {...field} {...props} />}
    />
  );
};

修复后的代码 #

import { TextField } from '@mui/material';
import { Controller } from 'react-hook-form';
import React, { forwardRef } from 'react';

// 使用forwardRef让组件接收并转发ref
const MuiTextField = forwardRef(({ control, name, ...props }, ref) => {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field }) => (
        // 将ref传递给MUI TextField的inputRef属性（MUI表单组件用inputRef接收底层输入框ref）
        <TextField {...field} {...props} inputRef={ref} />
      )}
    />
  );
});

// 可选：设置displayName，方便React DevTools识别组件（不影响功能）
MuiTextField.displayName = 'MuiTextField';

关键修改说明 #

• 用forwardRef()包裹组件定义，使组件能接收第二个参数ref
• 将接收到的ref传递给MUI TextField的inputRef属性（MUI的表单组件不直接用标准ref，而是通过inputRef暴露底层输入元素的引用）
• 可选添加displayName，提升调试体验

使用示例 #

import { useForm } from 'react-hook-form';
import MuiTextField from './MuiTextField';

const MyForm = () => {
  const { control, handleSubmit } = useForm();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <MuiTextField
        control={control}
        name="username"
        label="用户名"
        variant="outlined"
        required
      />
      <button type="submit">提交</button>
    </form>
  );
};

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