使用Material UI TextField结合自定义组件时的Ref转发问题

你遇到的两个错误本质是同一个问题：Material UI的InputBase（TextField底层依赖）要求inputComponent接收的是一个能持有ref的组件，而函数组件默认不支持接收ref，必须通过React.forwardRef正确转发ref到内部的可交互元素上。以下是具体解决思路：

1. 给ToggleSwitch组件添加正确的Ref转发 #

你的ToggleSwitch组件需要用React.forwardRef包裹，并且把外部传入的ref直接传递给内部的MUI Switch组件（这是可聚焦的核心元素）：

import Switch from '@mui/material/Switch';
import React from 'react';

const ToggleSwitch = React.forwardRef(({ checked, onChange, ...props }, ref) => {
  return (
    <Switch
      ref={ref} // 关键：将外部ref传递给内部Switch组件
      checked={checked}
      onChange={onChange}
      {...props}
    />
  );
});

export default ToggleSwitch;

2. 让CustomInput组件正确转发Ref到内部元素 #

CustomInput作为中间层，同样需要用React.forwardRef包裹，并且根据isToggle状态把ref传递给对应的内部组件（ToggleSwitch或原生input）：

import React from 'react';
import ToggleSwitch from './ToggleSwitch';

const CustomInput = React.forwardRef(({ isToggle, ...rest }, ref) => {
  if (isToggle) {
    return <ToggleSwitch ref={ref} {...rest} />;
  }
  return <input ref={ref} {...rest} />;
});

export default CustomInput;

3. 正确配置TextField的InputProps #

在使用TextField时，只需将CustomInput传入inputComponent，InputBase会自动把所需的ref传递给CustomInput，无需手动在inputProps中传ref：

import TextField from '@mui/material/TextField';
import CustomInput from './CustomInput';

// 使用示例
<TextField
  variant="outlined"
  label="自定义输入组件"
  InputProps={{
    inputComponent: CustomInput,
    inputProps: {
      isToggle: true, // 控制切换为开关组件
      checked: true, // 开关状态
      onChange: (e) => console.log(e.target.checked)
    }
  }}
/>

常见踩坑点 #

• 只给外层组件套了forwardRef，但没把ref传递到内部可聚焦元素（比如Switch或input），导致InputBase无法获取有效ref。
• 错误地在inputProps中手动传递ref，这会覆盖InputBase自动传递的ref，引发错误。

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