React报错Cannot read properties of undefined (reading 'handleInputAddChange') 同格式其余代码正常

问题原因 #

你遇到的报错本质是访问this.handleInputAddChange时，this指向为undefined，核心有三类常见诱因：

1. 混用了两种this绑定规则：你已经用箭头函数类属性的方式定义事件处理函数，该语法默认会将this永久绑定到类实例，不需要再在构造函数中手动执行bind操作，两种绑定方式同时使用可能触发绑定异常。
2. 输入框所在作用域this丢失：如果<input>写在render方法的嵌套函数（比如数组map回调、子组件渲染参数）中，嵌套函数如果是普通函数写法，内部的this会指向undefined，无法访问到类实例的方法。
3. 编译配置不支持类属性语法：如果你的项目没有配置支持类属性语法的Babel插件，handleInputAddChange = (e) => {}的写法不会被正确编译，导致该方法根本没有挂载到类实例上，访问时自然报错。

解决方案 #

方案1（推荐）：保留箭头函数写法，删除冗余绑定 #

删除构造函数中的bind语句即可：

constructor(props) {
  super(props);
  this.state = {
    addchange: ''
  }
  // 移除该行：this.handleInputAddChange = this.handleInputAddChange.bind(this);
}

事件处理函数和输入框绑定代码保持原有写法不变。

方案2：使用普通类方法，保留手动绑定 #

如果你不想用类属性语法，把事件处理函数改成普通类方法即可：

handleInputAddChange(e) {
  e.preventDefault();
  this.setState({
    [e.target.name]: e.target.value
  })
}

构造函数中的bind语句保留，输入框绑定代码不变。

额外排查项 #

如果<input>写在嵌套函数中，把嵌套函数改成箭头函数保证this指向正确，比如map场景的调整：

// 错误写法
render() {
  return this.state.list.map(function(item) {
    return <input type="text" name="addchange" onChange={this.handleInputAddChange} />
  })
}

// 正确写法
render() {
  return this.state.list.map((item) => {
    return <input type="text" name="addchange" onChange={this.handleInputAddChange} />
  })
}

如果调整后仍报错，检查项目Babel配置，确保已经安装启用@babel/plugin-proposal-class-properties插件，或使用了包含该特性的最新版@babel/preset-react预设。

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