ReactJS的onClick没有发射

Question

我有：

...

setActive(section) {
        this.setState({
            currentSection: section
        });
        console.log('Current view is'+this.state.currentSection);
    }

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

但是，当我点击这些成分什么都没有发生。我究竟做错了什么？

Answer 1

避免在.bind()处理程序本身调用onclick。取而代之的是，你可以通过setActive()变量看到的箭头功能的上下文是您的组件的直接调用this：

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

此外，要优化render()方法，你可以创建预先绑定功能情况，以避免在您的渲染方法使用箭头功能：

constructor(props) {
 super(props);

 /* Bind setActive to this component/class instance */
 this.setActiveTest1 = this.setActive.bind(this, 'test1')
 this.setActiveTest2 = this.setActive.bind(this, 'test2')
 this.setActiveTest3 = this.setActive.bind(this, 'test3')
}

setActive(section) {
    this.setState({
        currentSection: section
    });
    console.log('Current view is'+this.state.currentSection);
}

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

Answer 2

问题是，你正在使用箭头功能，并结合以及两者。您还没有绑定到执行上下文。

这是一个令人困惑的概念。

当你调用一个onClick无箭的功能，你需要绑定。

因此，像这样的电话...

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

需要调用否则this.setActive将失去约束力。它绑定到你希望它在运行执行上下文，在这种情况下是这样

一个ES6箭头功能是词汇结合的和不需要被绑定到一个执行上下文。

因此，你可以有...

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

这将在编写程序的情况下自动运行，因此不需要绑定。

此外，要绑定到字符串而不是执行上下文（通常是组分）。

取出绑定和你的函数应该运行。

Answer 3

你应该绑定你的事件，构造函数，但不是属性本身。