Question

我知道讨论范围问题的类似线程。

使用以下组件

import React from 'react';
import ReactDOM from 'react-dom';

class Example extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            counter: 0
        }
    }

    addMore() {
        this.setState({
            counter: this.state.counter + 1
        });
    }

    render() {
        return (

            <div onClick={ this.addMore }>
                <p>counter: { this.state.counter }</p>
            </div>

        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

点击div后，您获得Cannot read property 'setState' of null

我知道你可以做this.addMore.bind(this)之类的事情，但所有这些似乎都是奇怪的额外样板代码风格代码才能让它发挥作用。

什么被认为是最优雅的方式？当然，人们必须有一种优先的方式，除了眼睛疼痛外还有其益处吗？

Answer 1

addMore = () => {
  this.setState({
    counter: this.state.counter + 1
  });
}

箭头语法为您处理this绑定

查看这个很棒的链接以获取更多信息，它显示了许多实现此目的的方法 http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

Answer 2

您需要将正确的this上下文绑定到该函数，并且可以通过将this.addMore = this.addMore.bind(this);添加到构造函数来实现。

constructor(props) {
    super(props);

    this.state = {
        counter: 0
    }

    this.addMore = this.addMore.bind(this);
}

在ES5 React.createClass中，所有函数都自动绑定到正确的this，但在ES6类中，正确的this上下文不会自动绑定。 reference

这在构造函数中称为Bind，这是React文档中目前建议的“在应用程序中提高性能”的方法。 reference

React - 无法读取属性＆＃39; setState＆＃39;为null

2 个答案: