這個背景

使用 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;