处理 react_React 事件处理中的this的指向问题

在React中对元素进行事件绑定时，事件名和绑定事件的方式和原生js绑定事件一样，直接在HTML上直接指定某个事件调用某个函数，不过有区别的事，对于事件函数的绑定，React又显得不一样，对于刚开始接触React的人来说，甚至有些难以理解。

HTML
<button onclick="onBtnClick">按钮</button>

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

从上面两段代码可以看出，大体还是相似的，不过第二段代码中隐藏的问题还是挺多的。

首先我们先看一段代码：

class Test extends React.Component { 

  onBtnClick = () => {
    console.log(2);
  };

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

这段代码就是简单的点击按钮就打印出2，我们看下结果

正常打印出2，没有问题，那么我们稍微将代码修改下

class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      number: 0
    };
  }
  onBtnClick() {
    this.setState({
      number: this.state.number + 1
    });
  }

  render() {
    return (
      <div>
        <h2>{this.state.number}</h2>
        <button onClick={this.onBtnClick}>按钮</button>
      </div>
    );
  }
}

点击按钮之后，将会让number+1，那么我们看下结果：

结果报错了，那么这是为啥呢，其实主要是onBtnClick函数里面用到了this，我们的目的是在点击的时候，通过调用当前实例中的setState方法来更新number的值，但是目前组件已经被渲染成HTML元素了，整个元素处于window环境下，当我们点击时，方法内部的this已经指向window了，所以不存在setState和state了，自然就报错了。那么我们修改下onBtnClick，将值打印出来看下：

  onBtnClick() {
    console.log(this);
    console.log(this.setState);
    console.log(this.state);
    this.setState({
      number: this.state.number + 1
    });
  }
 

可以看到第一个this指向window,2和3都是undefined，那么这种情况怎么处理呢，附上官网事件解决方案

React-事件处理​zh-hans.reactjs.org

其中

这个写法是我觉得非常有意思的，通过在 class内部 使用赋值语句将一个箭头函数指向一个变量，这个是一个新的语法，通过这种方式声明的变量都会变成实例对象的属性，不会挂在原型上，同时又因为是箭头函数，在声明时就已经确定了this指向，所以该方法内部也不会报错，并且会按照我们的想法进行操作。