1

我对 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;

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

谢谢你。

4

2 回答 2

1

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

onClick={() => { setToggleCollapse(toggle => !toggle); }}
于 2020-03-19T06:52:32.183 回答
1

那么你有

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

这意味着当您单击它时，它每次都将其设置为 true，无论它是否打开。单击时，您应该根据当前值反转值。此外，您的命名也不太合理，“折叠”应该是形容词，而动作应该是设置该值。所以是这样的：

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

...

<MDBListGroupItem class="list-group-item-header" onClick={() => { setCollapsed(!collapsed); }}>
于 2020-03-19T06:53:27.953 回答