reactjs - React 事件处理程序中 this 的值

Question

由于某种原因，这个值在 react 事件处理程序中丢失了。阅读文档，我认为 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 来说是正确的行为。

autobinding feature does not apply to ES6 classes在 v0.13.0 中。

所以你需要使用:

 <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>
  }
}