React.js: 可折叠菜单未 return 到原始状态

Question

我是 React 的新手，我想寻求一些帮助。

我使用 Material Design bootstrap 制作了一面 menu/navigation -- 列表组、列表组项目、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;

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

谢谢。

Answer 1

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

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

Answer 2

你有

onClick={() => { setToggleCollapse(true); }}

这意味着当您点击它时，它每次都会将其设置为 true，无论它是否打开。单击时，您应该根据当前值反转值。另外你的命名不太合理， "collapsed" 应该是形容词，动作应该是设置那个值。所以像这样：

const [collapsed, setCollapsed] = useState(false);

...

<MDBListGroupItem class="list-group-item-header" onClick={() => { setCollapsed(!collapsed); }}>

React.js: 可折叠菜单未 return 到原始状态

React.js: Collapsible menu does not return to original state

reactjs

bootstrap-4

material-design

mdbreact