Redux Form在Material UI自定义输入组件中事件不触发问题咨询

我之前也踩过这个坑，这问题本质是Redux Form传递的表单事件没有被正确绑定到你的Material UI自定义组件上。当你用原生input作为Field的component时，Redux Form能直接把事件绑定到原生元素上，但自定义组件需要你手动透传这些事件处理器。

核心原因 #

Redux Form的Field组件会把表单相关的事件（onBlur、onFocus、onChange等）和值包装在input对象里，传递给你指定的自定义组件。如果你的自定义组件没有接收并绑定这些属性，Redux Form就无法捕获到对应的事件。

解决方案步骤 #

1. 正确接收并透传Redux Form的props

修改你的CustomInput组件，确保从props中解构出input对象，并把里面的事件处理器绑定到Material UI的输入组件上：

// 正确的CustomInput示例
import TextField from '@mui/material/TextField';

const CustomInput = ({ input, label, meta, ...rest }) => {
  // input对象包含onBlur、onFocus、onChange、value等Redux Form需要的属性
  return (
    <TextField
      label={label}
      // 透传input里的所有表单相关属性
      {...input}
      // 透传其他可能的props（比如样式、禁用状态等）
      {...rest}
      // 可选：利用meta对象实现错误提示
      error={meta.touched && meta.error}
      helperText={meta.touched && meta.error}
    />
  );
};

2. 显式绑定事件（可选）

如果你不想透传所有input属性，也可以显式绑定需要的事件：

const CustomInput = ({ input, label }) => {
  return (
    <TextField
      label={label}
      value={input.value}
      onChange={input.onChange}
      // 显式绑定onBlur和onFocus
      onBlur={input.onBlur}
      onFocus={input.onFocus}
    />
  );
};

3. 确认Field组件的使用方式

确保你的Add User Form中Field组件的调用方式正确，把自定义组件传给component属性：

import { Field, reduxForm } from 'redux-form';

const AddUserForm = ({ handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="email"
        component={CustomInput}
        label="Email Address"
      />
      {/* 其他表单字段 */}
      <button type="submit">Add User</button>
    </form>
  );
};

export default reduxForm({ form: 'addUser' })(AddUserForm);

4. 排查额外干扰

• 检查是否在自定义组件中阻止了事件冒泡（比如调用event.stopPropagation()），这会导致Redux Form无法捕获事件。
• 确认Material UI的TextField版本是否兼容，某些旧版本可能对事件处理有特殊要求。

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