Javascript ReactJS onClick未点火

我有：

setActive（部分）{
这是我的国家({
当前区段：区段
});
console.log（'当前视图为'+this.state.currentSection）；
}
render（）{
返回
this.setActive.bind（'test1'）}/>
this.setActive.bind（'test2'）}/>
this.setActive.bind（'test3'）}/>
}

---

但当我点击这些组件时，什么都没有发生。我做错了什么？

您应该在构造函数中绑定事件，而不是在属性本身中。

避免在

onclick

处理程序本身中调用

.bind（）

。相反，您可以通过

this

变量直接调用

setActive（）

，因为arrow函数的上下文是组件的上下文：

render() {
    return <div>
        <div className="section">
            <HeaderButton active text="test1" count={23} 
                          backgoundColor={'#c04c36'} 
                          onClick={() => this.setActive('test1')}/>
        </div>
        <div className="section">
            <HeaderButton text="test2" count={45} 
                          backgoundColor={'#ffe698'} 
                          onClick={() => this.setActive('test2')}/>
        </div>
        <div className="section">
            <HeaderButton text="test3" count={4} 
                          backgoundColor={'#198a75'} 
                          onClick={() => this.setActive('test3')}/>
        </div>
    </div>
}

---

问题是，您既在使用arrow函数，也在使用绑定。您也没有绑定到执行上下文

这是一个令人困惑的概念

当您在没有arrow函数的情况下调用onClick时，需要绑定它

因此，像这样的电话

onClick = {this.setActive.bind(this)}

需要调用，否则this.setActive将丢失其绑定。它绑定到您希望它在其中运行的执行上下文，在本例中

ES6 arrow函数是词汇绑定的，不需要绑定到执行上下文

因此，你可以

onclick ={() => this.setActive()}

它将在编写它的上下文中自动运行，因此不需要绑定

此外，您将绑定到字符串，而不是执行上下文（通常是组件）

---

取出绑定，您的函数应该运行。

第二个方法给出了未捕获的TypeError:无法读取的属性“setActive”undefined@imperium2335小错误，只是更新了答案。这有帮助吗？谢谢，它不再出错了，但它什么也没做。好的，我必须在我的HeaderButton组件中放入onClick={this.props.onClick}，现在似乎可以工作了。@imperium2335很好！很高兴我能帮忙：-）

onClick = {this.setActive.bind(this)}

onclick ={() => this.setActive()}