这个背景

使用 React.createClass 将自动正确绑定 this 上下文（值），但使用 ES6 类时则不然。

React.createClass

注意 this.handleClick 声明与 this.handleClick 方法绑定。当调用此方法时，React 会将正确的执行上下文应用于 handleClick。

import React from 'react';

const MyComponent = React.createClass({
  handleClick() {
    console.log(this); // the React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

export default MyComponent;

React.Component

对于 ES6 类，this 默认为 null，该类的属性不会自动绑定到 React 类（组件）实例。

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // null
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default MyComponent;

我们可以通过几种方式绑定正确的 this 上下文。

案例 1：绑定内联：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}></div>
    );
  }
}

export default MyComponent;

情况 2：在类构造函数中绑定

另一种方法是改变 this.handleClick 内的 this.handleClick 的背景。这样我们就可以避免内联重复。被许多人认为是一种更好的方法，可以避免触及 JSX：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default MyComponent;

案例 3：使用 ES6 匿名功能

你还可以使用 ES6 匿名函数，而无需显式绑定：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
}

export default MyComponent;