Question

在使用React的简单ES6应用中，我有一个counter，当{{1} integer时，0的值最初更新为button单击。当我bind(this)到function到addOne()时，应用就可以了。但是，当我将（this）绑定到构造函数中的所有三个按钮时，由于此错误，应用程序无法加载，

未捕获的TypeError：无法读取属性 '__reactInternalInstance $ ggcqbwtkkb'为null

我已经读过如果我在render方法中绑定它将在每次页面呈现时创建该函数。我想避免这种情况。

问题

为什么当bind(this) onClick method constructor应用加载正常且一个按钮可以为clicked时，为什么当我{ {1}}其他两个bind(this)应用程序会抛出前面提到的错误吗？

构造函数在这样的情况下工作，

buttons

但是当我添加其他两个绑定时，它不起作用，

constructor(props) {
            super(props);
                this.state = {
                    count: 0
            }
            this.addOne = this.addOne.bind(this);
        }

代码示例

constructor(props) {
        super(props);
            this.state = {
                count: 0
        }
        this.addOne = this.addOne.bind(this);
        this.addTwo = this.addTwo.bind(this);
        this.addTen = this.addTen.bind(this);
    }

视觉示例

Answer 1

你有一个错字

addTwo()

不存在您只有addFive(), addTen() and addOne()

请参阅下面提供的固定代码

＆＃13;

class Home extends React.Component {
    constructor(props) {
        super(props);
            this.state = {
                count: 0
        }
        this.addOne = this.addOne.bind(this);
        this.addFive = this.addFive.bind(this);
        this.addTen = this.addTen.bind(this);
    }
    addOne() {
        this.setState({
            count: this.state.count + 1
        })
    }
    addFive() {
        this.setState({
            count: this.state.count + 5
        })
    }
    addTen() {
        this.setState({
            count: this.state.count + 10
        })
    }
    render() {
      return (
        <div className="App">
            <div className="home-intro">
                <h2>Welcome to Home Component</h2>
            </div>
            <div className="counter">
                <h3>Count: {this.state.count}</h3>
            </div>
            <div className="btn-group">
                <button onClick={this.addOne} className="btn blue-btn">Add 1</button>
                <button onClick={this.addFive} className="btn green-btn">Add 5</button>
                <button onClick={this.addTen} className="btn red-btn">Add 10</button>
            </div>
        </div>
      );
    }
}

ReactDOM.render(<Home />, document.querySelector('#app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app"></div>

</body>
</html>

＆＃13;

当我在构造函数

1 个答案: