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

问题是您同时在使用箭头功能和绑定功能。您也没有绑定到执行上下文。

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

调用没有箭头功能的onClick时，需要将其绑定。

因此，这样的通话...

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

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

ES6箭头函数是按词法绑定的，不需要绑定到执行上下文。

因此，您可以拥有...

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

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

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

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

Answer 2

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

Answer 3

避免在.bind()处理程序本身中调用onclick。相反，您可以直接通过setActive()变量调用this，以查看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>
}

或者，为了优化您的render()方法，您可以创建预绑定函数实例，以避免在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>
}

ReactJS onClick不触发

3 个答案: