javascript - 更改循环中 react 组件的 onClick 函数？

Question

我为导航菜单制作了一个组件，单击时会关闭和打开

class Panel extends Component {

openNav() {
    // opens the navigation menu
    // changes onClick attribute to closeNav()
}

closeNav() {
    // closes the navigation menu
    // changes onClick attribute to openNav()
}


render () {
    return (
        <div id="panel" className="hamburger" 
        onClick= {/*default value is openNav(),and when clicked, 
        changes to closeNav()*/} ></div>
    );
}
}

有没有一种方法可以编写 openNav() 和 closeNav() 以便单击时可以依次重复调用它们？另请告知在 render() 中传递给 onClick 属性的内容。

Answer 1

您可以将您的函数称为“toggleNav”，然后执行如下操作:

onToggleNav() {
    this.setState({
        isNavbarOpen: !this.state.isNavbarOpen
    });
}

render () {
    return (
        <div
            id="panel"
            className="hamburger" 
            onClick={::this.onToggleNav}
        >
            // I don't know if the div is your navbar or you have a specific navbar component. I just use the component below for demonstration purposes how to use the state then.
            <Navbar
                isOpened={this.state.isNavbarOpen}
            />
        </div>
    );
}