React 类组件 this指向问题及解决方法

在React中，对事件命名采用小驼峰式（camelCase），而不是纯小写。
传统HTML、React中JSX写法：

// 传统html
<button onclick="handleClickBtn()">按钮</button>
// React JSX
<button onClick={handleClickBtn}>按钮</button>

在传统HTML写法里，οnclick="handleClickBtn()"，引号内部是js代码，当触发事件后执行该脚本；

而在React里使用{ }JSX的语法，onClick={handleClickBtn}这句代码React会帮我们添加了监听器，handleClickBtn是当前作用域下的一个指向方法的变量名，但是由于JS函数工作原理问题，在ES6 class语法定义组件中（函数组件则不需要，但它也不能提供状态功能的支持，本文仅讨论class组件），我们需要为它绑定this，否则handleClickBtn内部this的指向会出现异常，指向该函数的调用者（此处是undefined），完整代码：

class Btn extends React.Component {
  constructor(props) {
    super(props);
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClickBtn= this.handleClickBtn.bind(this);
  }

  handleClickBtn() {
   	// ...通过手动绑定this，this指向正常
  }

  render() {
    return (
      <button onClick={this.handleClickBtn}>
        按钮
      </button>
    );
  }
}

这样每次绑定都要在constructor构造函数里通过bind()方法绑定this的指向，当你的事件处理程序多了会很麻烦。

解决办法有两个：箭头函数，class fields语法。

一.箭头函数

箭头函数内this是词法作用域

代码:

class Abc extends React.Component{
  claClick(){
    console.log(this);
  }
  render(h) {
    return (
      <p onClick={()=>{this.claClick()}}>111</p>
    )
  }
}

二.class fields语法

其实都差不多只是上下的函数切换了一下

class Abc extends React.Component{
  claClick=()=>{
    console.log(this);
  }
  render(h) {
    return (
      <p onClick={this.claClick}>111</p>
    )
  }
}