Как отобразить список меню при нажатии на значок гамбургера в React

Question

Учусь реагировать. js. У меня проблема с нажатием меню на мобильном телефоне.

Я показываю значок Humbarger на мобильном телефоне. Теперь, как я могу отобразить значок закрытия и список меню, когда пользователь нажимает значок Humbarger?

Вторая проблема: ,

Я нахожусь на домашней странице и Я нажал «О нас» в меню, после чего моя страница перенаправляется на «О нас», но проблема в том, что мое меню все еще отображается открытым. Мне нужно закрыть меню, чтобы пользователи могли получить информацию о странице.

(Шаг 1)

(Шаг 2) I нажмите на значок Humbarger, откроется меню и я нажму на нас

(Шаг 3) Обратите внимание, что страница перенаправляется на нас, но меню все еще открыто .

Вы можете посмотреть мой код здесь: https://codesandbox.io/s/happy-almeida-t6q7w?file= / src / components / Header. js

Не могли бы вы помочь меня с этой проблемой?

Answer 1

Что вы могли бы сделать, так это добавить обработчик событий в гамбургер-меню и значок закрытия, чтобы обновить локальное состояние, например open или close. Затем в зависимости от состояния вы добавляете или удаляете className. Как это:

Стиль. css

/* When we click the hamburger menu we want to hide the icon */
.hamburger_img.close {
    display: none;
}

/* When we click the menu we want to display this icon */
.right-menu.open {
    display: block;
}

HeaderMenu. js

const HeaderMenu = () => {

    // Adding class name when scrolll
    const [openMenu, setOpenMenu] = useState(false);

    // Other code here..

    // A toggler to update the state when we open or close menu
    const toggleMenu = () => setOpenMenu(openMenu => !openMenu);

    // Dynamically add 'open' class if the state is true
    const getXMarkClassName = () => `right-menu float-right ${openMenu ? 'open': ''}`;

    // Dynamically add 'close' class if the state is true
    const getHamburgerMenuClassName = () => `hamburger_img ${openMenu ? 'close': ''}`;

    return (
        <header id="header_menu" className={headerClassName}>
            <div className={getHamburgerMenuClassName()} onClick={toggleMenu} >
                <img src={require("../images/menu.png")} alt="Menu bar"/>
            </div>
            <div className={getXMarkClassName()}>
                <div className="x_mark_img" onClick={toggleMenu} >
                     <img src={require("../images/close.png")} alt="Menu Close" />
               </div>
               <ul>
                   {/* code here... */}
               </ul>
            </div>
        </header>
  );
};

Уведомление что я добавил обработчик onClick к div, чтобы обновлять состояние при каждом нажатии. Как и мудрое замечание, я вызываю функцию, чтобы получить className как для значка меню, так и для значка закрытия.

Вторая проблема

Чтобы закрыть навигацию, когда изменения маршрута вы можете прослушивать изменения маршрута, используя useEffect, а затем вызывать функцию toggle(). Примерно так:

import React, { useEffect } from 'react';
import { useLocation } from 'react-router';

function HeaderMenu() {
    // Other code here...
    const location = useLocation();

    useEffect(() => {
      console.log("route has been changed, toggle the menu");

      if (openMenu) {
          toggleMenu();
      }

      // To scroll up on route change
      window.scrollTo(0, 0);
  }, [location.pathname]);

  // Other code here...
}

Обратите внимание, что я не добавил openMenu в список зависимостей в useEffect вместе с location.pathname. Это потому, что я не хочу, чтобы этот useEffect запускался каждый раз, когда состояние openMenu изменяется только при изменении маршрута. У меня есть оператор if, поэтому, если маршрут изменится и меню не было открыто, переключатель не должен вызываться.

Надеюсь, это поможет. Вы можете проверить это в этой кодах и