Reactjs 当我在构造函数中多次绑定时，React应用程序不会呈现

在使用ES6的简单React应用程序中，我有一个计数器，当单击按钮时，它会将最初设置的整数值更新为0。当我将其绑定到函数addOne时，应用程序运行良好。但当我将其绑定到构造函数中的所有三个按钮时，由于此错误，应用程序无法加载

未捕获的TypeError:无法读取属性 null的“\uu reactInternalInstance$ggcqbwtkkb”

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

问题:

为什么当我将此绑定到构造函数中的一个onClick方法时，应用程序加载良好，可以单击一个按钮，但当我将此绑定到其他两个按钮时，应用程序会抛出前面提到的错误

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

但当我加上另外两个绑定时，它不起作用

代码示例

可视示例

你打错了

addTwo()

不存在您只有addFive、addTen和addOne

请参见下面您提供的固定代码

类Home扩展了React.Component{ 构造器{ 超级作物； 此.state={ 计数：0 } this.addOne=this.addOne.bindthis； this.addFive=this.addFive.bindthis； this.addTen=this.addTen.bindthis； } 阿登{ 这是我的国家{ 计数：this.state.count+1 } } 加五{ 这是我的国家{ 计数：this.state.count+5 } } 添加{ 这是我的国家{ 计数：this.state.count+10 } } 渲染{ 回来 欢迎使用Home组件 计数：{this.state.Count} 加1 加5 加10 ; } } ReactDOM.render，document.querySelector'app' JS-Bin

---

嗯。。因为没有两个人？哈哈哈，真的！：P

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

class Home extends Component {
    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);
    }
    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>
      );
    }
}

addTwo()