javascript - 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)。您也没有绑定(bind)到执行上下文。

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

当你调用一个没有箭头函数的onClick时，你需要绑定(bind)它。

因此，像这样的调用...

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

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

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

因此，你可以有...

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

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

此外，您绑定(bind)到一个字符串而不是一个执行上下文(通常是一个组件)。

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