Error in render: "TypeError: Cannot read properties of undefined (reading 'stopPropagation')"

关于 React 组件中 this 的理解
在React类组件中，当定义一个方法时，默认情况下该方法中的 this 并不会自动绑定到实例上。因此，在事件处理器或其他回调函数内尝试访问 this 可能会导致 undefined 错误[^1]。
对于提供的代码片段而言：
class App extends Component {
state = { count: 0 };

handleClick(e) {
console.log(e);
console.log(this.state.count); // 此处 this 是 undefined 导致报错
}

render() {
return (
<>
<div>计数器：{this.state.count}</div>
<div>
<button onClick={this.handleClick}>按钮</button>
</div>
</>
);
}
}

上述代码中，点击按钮触发 handleClick() 方法时，由于未正确绑定上下文环境(this)，所以会出现 Cannot read properties of undefined (reading 'state') 的错误提示。
为了修复这个问题，有几种常见的方式可以确保 this 被正确指向当前组件实例:
方案一：使用箭头函数作为方法声明
通过将普通的方法改为箭头函数的形式来定义，因为箭头函数会继承外部作用域内的 this 值，从而避免了手动绑定的需求。
// 修改后的App.js文件
import React, { Component } from "react";

class App extends Component {
constructor(props){
super(props);
this.state = {count : 0};
}

handleClick = e => {
console.log(e);
console.log(this.state.count);
};

render(){
return(
<>
<div>计数器:{this.state.count}</div>
<div><button onClick={(e)=>this.handleClick(e)}>按钮</button></div>
</>
)
}
}

export default App;

方案二：显式地绑定 this
可以在构造函数里利用 .bind() 明确指定 this 应该指的是哪个对象；也可以直接在 JSX 中调用的时候就传入已经绑定了的对象。
constructor(props) {
super(props);

this.state = { count: 0 };

// 在构造函数内部进行绑定
this.handleClick = this.handleClick.bind(this);
}

...

<button onClick={this.handleClick}>按钮</button>

这两种方式都可以有效地解决问题并让程序正常工作。需要注意的是如果采用方案一时，则不需要再做额外的绑定操作；而如果是按照第二种方式进行的话，则无论是在哪里创建监听器都需要记得去做一次这样的绑定动作。