React事件处理程序中的值

Question

由于某种原因,这个值在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组件类自动绑定说明中提到):使用箭头函数作为类属性,那么您不需要在任何地方绑定或包装您的处理程序.

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

这是最简单,最干净的解决方案!

Answer 3

像其他人所说的那样,当使用ES6类时,React不会自动将方法引导到实例.也就是说,我会习惯在事件处理程序中始终使用箭头函数,例如:onClick={e => this.handleClick()}

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

这是因为这意味着您可以在测试中使用间谍替换handleClick方法,这是使用bind时无法执行的操作.