单击菜单项后React JS汉堡菜单不折叠

Question

我正在使用 react-router 构建一个 SPA。我为它制作了一个响应式菜单。但是我想要实现的一件事是在单击菜单项后折叠菜单。我不知道如何实现这一点，有人可以告诉我吗？

var { Router, Route, IndexRoute, IndexLink, Link } = ReactRouter;

class App extends React.Component {
    constructor() {
        super();
        this.state = {
          menuVisible: false
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({menuVisible: !this.state.menuVisible});
    }
    render() {
        return (
            <div className="wrapper">
                <div className="header">
                    <div className="topbar">
                        <a className={"menu"+" "+this.state.menuVisible} onClick={this.handleClick}><i className="zmdi zmdi-menu"></i></a>
                        <a className="logo">Dummy SPA</a>
                    </div>
                    <div className={"menubar"+" "+this.state.menuVisible}>
                        <ul>
                            <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
                            <li><Link to="deals" activeClassName="active">Deals</Link></li>
                            <li><Link to="orders" activeClassName="active">Orders</Link></li>
                            <li><Link to="support" activeClassName="active">Support</Link></li>
                        </ul>
                    </div>
                </div>

                <div className="container">
                    {this.props.children}
                </div>
            </div>
        );
    }
}

//Dummy Pages
class Home extends React.Component {
    render() {
        return (
            <div className="page">
                <h1>Home</h1>
            </div>
        );
    }
}

class Deals extends React.Component {
    render() {
        return (
            <div className="page">
                <h1>Deals</h1>
            </div>
        );
    }
}

class Orders extends React.Component {
    render() {
        return (
            <div className="page">
                <h1>Orders</h1>
            </div>
        );
    }
}

class Support extends React.Component {
    render() {
        return (
            <div className="page">
                <h1>Support</h1>
            </div>
        );
    }
}

//Router Rendering
ReactDOM.render(
    <Router>
        <Route path="/" component={App}>
            <IndexRoute component={Home} />
            <Route path="deals" component={Deals}/>
            <Route path="orders" component={Orders}/>
            <Route path="support" component={Support} />
        </Route>
    </Router>,
    document.getElementById('app')
);

Codepen Demo 是 here。

Answer 1

您已经有一个菜单图标的点击处理程序，它在点击时显示/隐藏菜单。我只需将相同的处理程序添加到每个菜单项：

render() {
    return (
        <div className="wrapper">
            <div className="header">
                <div className="topbar">
                    <a className={"menu"+" "+this.state.menuVisible} onClick={this.handleClick}><i className="zmdi zmdi-menu"></i></a>
                    <a className="logo">Dummy SPA</a>
                </div>
                <div className={"menubar"+" "+this.state.menuVisible}>
                    <ul>
                        <li><IndexLink to="/" activeClassName="active" onClick={this.handleClick}>Home</IndexLink></li>
                        <li><Link to="deals" activeClassName="active" onClick={this.handleClick}>Deals</Link></li>
                        <li><Link to="orders" activeClassName="active" onClick={this.handleClick}>Orders</Link></li>
                        <li><Link to="support" activeClassName="active" onClick={this.handleClick}>Support</Link></li>
                    </ul>
                </div>
            </div>

            <div className="container">
                {this.props.children}
            </div>
        </div>
    );