未绑定this的React类组件事件处理器为何仍能正常工作？

嘿，这个问题问得特别到位！很多刚上手React类组件的开发者都会有这个疑惑——明明官方文档强调要把事件处理器绑定到this，为啥我没绑代码还能正常跑起来？

核心原因其实很简单：你的clickEvent函数根本没用到组件实例的this！

让我们拆解一下细节：

• React类组件的方法默认运行在严格模式下，当你直接把this.clickEvent传给onClick时，这个函数的this指向其实是undefined。
• 但你的clickEvent里只是通过原生DOM API修改了页面内容，全程没有访问this.props、this.state或者组件实例的其他属性/方法。既然没用到this，那不管它是undefined还是别的什么值，函数都能正常执行，自然不会报错。

如果不信，你可以试试修改你的clickEvent，加入需要访问组件实例的代码，比如：

clickEvent(e){
  e.preventDefault();
  // 尝试访问this.state，这时候就会报错
  console.log(this.state);
  document.getElementById('change').innerHTML="This text changed";
}

这时候你点击按钮，就会看到熟悉的Cannot read property 'state' of undefined错误——这才是官方建议绑定this的典型场景：当你需要在事件处理器里访问组件实例的属性或方法时，必须保证this指向组件实例本身。

官方之所以强调绑定this，是为了提前规避后续开发中可能遇到的this指向问题——毕竟很多时候我们写事件处理器就是为了操作组件的状态或属性，提前绑定能避免后续修改代码时突然踩坑。

你的原始代码完整展示如下：

import React, { Component } from 'react'; 
class Experiment extends Component { 
  constructor(props){ 
    super(props); 
  } 
  clickEvent(e){ 
    e.preventDefault(); 
    document.getElementById('change').innerHTML="This text changed"; 
  } 
  render(){ 
    return( 
      <div> 
        <p id='change'>This paragraph will change</p> 
        <button onClick={this.clickEvent}>Press me</button> 
      </div> 
    ); 
  } 
} 
export default Experiment; 

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