reactjs - React.js：可折叠菜单不会恢复到原始状态

Question

我对 React 还很陌生，我想寻求一些帮助。

我使用 Material Design 引导程序制作了一个侧面菜单/导航——列表组、列表组项、MDBCollapse、NavLink

这是代码：

    import React, { useState } from 'react';
    import logo from "../assets/sbc-logo.png";
    import { MDBListGroup, MDBListGroupItem, MDBIcon, MDBCollapse, MDBBtn } from 'mdbreact';
    import { NavLink } from 'react-router-dom';

    const sideNavigation = () => {

        const [toggleCollapse, setToggleCollapse] = useState(false);

        return (
            <div className="sidebar-fixed position-fixed">
                {<a href="#!" className="logo-wrapper waves-effect">
                    <img alt="MDB React Logo" className="img-fluid" src={logo}/>
                </a>}
                <br/>
                <MDBListGroupItem class="list-group-item-header" onClick={() => { setToggleCollapse(true); }}>
                    <MDBIcon icon="exchange-alt" className="mr-3"/>
                    Transfers
                </MDBListGroupItem>
                <MDBCollapse id="basicCollapse" isOpen={toggleCollapse}>
                <NavLink to="/inbox" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="inbox" className="mr-2"/>
                        Inbox
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/sent" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="paper-plane" className="mr-2"/>
                        Sent
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/acknowledged" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="thumbs-up" className="mr-2"/>
                        Acknowledged
                    </MDBListGroupItem>
                </NavLink>

                <NavLink to="/bcpmode" activeClassName="activeClassItem">
                    <MDBListGroupItem>
                        <MDBIcon icon="power-off" className="mr-2"/>
                        BCP Mode
                    </MDBListGroupItem>
                </NavLink>
                </MDBCollapse>
            </div>
        );
    }

    export default sideNavigation;

当我第一次单击侧面菜单时，它没有问题。但是，当我再次单击它时它不会返回。任何建议都会有所帮助。

谢谢你。

标签： reactjsbootstrap-4material-designmdbreact

Answer 1

您没有切换元素，而是将其设置为 true，试试这个：

onClick={() => { setToggleCollapse(toggle => !toggle); }}