ReactJS setState报Cannot read property 'number' of undefined错误求助

你遇到的报错核心是this指向错误：

• 你在addEventListener中传入了普通匿名函数，普通函数的this会绑定到触发事件的DOM对象（也就是报错提示的HTMLInputElement元素），而非React组件实例。
• 此时你访问的this.state实际是DOM元素的属性，自然是undefined，读取number属性就会抛出对应错误，同时DOM元素上也没有setState方法，也会触发setState is not a function的报错。
• 其他同逻辑函数运行正常，是因为你用了类属性箭头函数写法，this默认绑定到组件实例。

方案1：替换回调为箭头函数 #

将事件监听的回调改为箭头函数，箭头函数的this会继承外层作用域（也就是组件实例的this）：

enterPressed = () => {
  const submit = document.getElementById('mySubmit');
  submit.addEventListener('keyup', (event) => {
    if (event.key === 'Enter') {
      this.setState({ mobileNum: this.state.number });
    }
  });
};

方案2：提前缓存组件实例的this #

在回调外部提前保存组件的this指向，回调内使用缓存的变量操作：

enterPressed = () => {
  const componentThis = this; // 缓存组件实例this
  const submit = document.getElementById('mySubmit');
  submit.addEventListener('keyup', function (event) {
    if (event.key === 'Enter') {
      componentThis.setState({ mobileNum: componentThis.state.number });
    }
  });
};

方案3（更推荐的React写法）：使用React合成事件绑定 #

不需要原生操作DOM添加监听，直接在JSX的输入框元素上绑定onKeyUp事件，天然绑定组件this，也不用手动管理事件解绑避免内存泄漏：

// JSX模板部分直接绑定事件
<input 
  id="mySubmit" 
  value={this.state.number}
  onKeyUp={this.handleKeyUp}
/>

// 类组件中添加对应处理方法
handleKeyUp = (event) => {
  if (event.key === 'Enter') {
    this.setState({ mobileNum: this.state.number });
  }
}

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