Реакция. js: Складное меню не возвращается в исходное состояние - PullRequest
Новая
       22

Реакция. js: Складное меню не возвращается в исходное состояние

1 голос
/ 19 марта 2020

Я довольно новичок в React, и я хотел бы попросить небольшой помощи.

Я создал боковое меню / навигацию, используя Material Design bootstrap - группа списков, элемент группы списков, 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;

Боковое меню не имеет проблем при первом нажатии. Тем не менее, он не возвращается обратно, когда я нажимаю его снова. Любой совет поможет, пожалуйста.

Спасибо.

Ответы [ 2 ]

1 голос
/ 19 марта 2020

Ну, у вас есть 

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

Что означает, что когда вы щелкаете по нему, он устанавливает его в true каждый раз, независимо от того, открыт он или нет. При нажатии вы должны инвертировать значение на основе текущего значения. Также ваше наименование не совсем имеет смысла, «свернутый» должен быть прилагательным, и действие должно состоять в том, чтобы установить это значение. Вот как то так: 

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

...

<MDBListGroupItem class="list-group-item-header" onClick={() => { setCollapsed(!collapsed); }}>
1 голос
/ 19 марта 2020

Вы не переключаете элемент, но устанавливаете его в true, попробуйте это: 

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