React使用MUI TextField通用handleChange报reading 'name'未定义如何解决

错误根源 #

你调用handleChange时传递的参数有误：你在onChange回调里把e.target.value（输入框值，字符串类型）传给了handleChange，但handleChange内部期望接收的是完整的事件对象e，所以访问e.target时就会因为e实际是字符串、不存在target属性而报错。

修复步骤 #

1. 修正TextField的onChange配置 #

把所有TextField的onChange属性修改为直接传递事件对象，两种写法都可以：

// 写法1：直接传入函数引用（更简洁）
onChange={this.handleChange}
// 写法2：手动传递事件对象（和你原来的写法风格统一）
onChange={e => this.handleChange(e)}

修改后的TextField示例：

<TextField
 className={classes.formInput}
 name="firstName"
 onChange={this.handleChange}
 required
 type="text"
 InputLabelProps={{
   shrink: true,
 }}
 error={!this.state.firstName}
 helperText="Name is required"
 label="First Name"
 variant="standard"
/>

注意：原代码中error={!firstName}的写法需要补充this.state前缀，否则也会抛出变量未定义的错误。

2. 可选优化：批量渲染字段减少重复代码 #

因为8个字段结构完全一致，可以把字段配置抽成数组，循环渲染即可消除冗余代码：
首先定义字段配置：

const fieldConfigs = [
  {
    name: 'firstName',
    label: 'First Name',
    required: true,
    helperText: 'Name is required',
    showError: !this.state.firstName
  },
  {
    name: 'lastName',
    label: 'Last Name',
    required: true
  },
  // 剩余6个字段按同样格式添加
]

然后在render方法里循环渲染：

{fieldConfigs.map(field => (
  <TextField
    key={field.name}
    className={classes.formInput}
    name={field.name}
    onChange={this.handleChange}
    required={field.required}
    type="text"
    InputLabelProps={{
      shrink: true,
    }}
    error={field.showError}
    helperText={field.helperText}
    label={field.label}
    variant="standard"
  />
))}

验证逻辑 #

• 确保每个TextField的name属性值和state中定义的字段名完全一致（大小写敏感）
• 你原来写的handleChange函数逻辑无需修改，保持原写法即可正常运行：

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value
  });
}

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