React 事件處理程序中 this 的值

Question

出於某種原因， this 的值在反應事件處理程序中丟失了。 閱讀文檔我認為 react 在這里做了一些事情以確保將其設置為正確的值

以下不符合我的預期

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs undefined
    }
    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        );
    }
}

但這確實：

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs Observer class instance
    }
    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>Click</button>
        );
    }
}

React 和 ES6 對我來說是新手，但這似乎不是正確的行為？

Answer 1

如果您使用新的class語法，這是 JavaScript 和 React 的正確行為。

自動綁定功能不適用於v0.13.0 中的ES6 類。

所以你需要使用：

 <button onClick={this.handleClick.bind(this)}>Click</button>

或其他技巧之一：

export default class Observer extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    /* ... */
  }
  render() {
      return <button onClick={this.handleClick}>Click</button>
  }
}

Answer 2

接受的答案很好，我在 ES6 中使用了很多，但我只想添加另一個我們在 ES7 中擁有的“更現代”的解決方案（在React 組件類自動綁定注釋中提到）：使用箭頭函數作為類properties ，那么您不需要在任何地方綁定或包裝您的處理程序。

export default class Observer extends React.Component {
  handleClick = (e) => {
    /* ... */
  }
  render() {
      return <button onClick={this.handleClick}>Click</button>
  }
}

這是迄今為止最簡單、最干凈的解決方案！

Answer 3

正如其他人所說，React 在使用 ES6 類時不會自動將方法綁定到實例。 也就是說，我會養成在事件處理程序中始終使用箭頭函數的習慣，例如： onClick={e => this.handleClick()}

代替： onClick={this.handleClick.bind(this)}

這是因為這意味着您可以在測試中用 spy 替換 handleClick 方法，這是您在使用 bind 時無法做到的。