移动端菜单点击链接后，如何还原hamburger-react汉堡图标至初始状态？

问题描述 #

已实现点击移动端菜单链接后关闭展开的菜单，但使用hamburger-react包的汉堡图标无法还原为初始条形样式。以下是相关代码：

Navbar组件代码 #

import React, { useState } from "react";
import "./Navbar.css";
import { Fade as Hamburger } from "hamburger-react";

const Navbar = () => {
  window.addEventListener("scroll", function () {
    const header = document.querySelector(".header");
    header.classList.toggle("active", window.scrollY > 0);
  });
  window.addEventListener("scroll", function () {
    const hamburger = document.querySelector(".hamburger");
    hamburger.classList.toggle("active", window.scrollY > 0);
  });

  const [click, setClick] = useState(false);
  const handleClick = () => setClick(!click);

  const closeMenu = () => setClick(false);

  return (
    <div className="parent">
      <div className="header d__flex justify__content__flex__end pxy__30">
        <ul className={click ? "nav-menu active" : "nav-menu"}>
          <li className="nav__items mx__15">
            <a href="/" onClick={closeMenu}>
              Home
            </a>
          </li>
          <li className="nav__items mx__15">
            <a href="#about" onClick={closeMenu}>
              About
            </a>
          </li>
          <li className="nav__items mx__15">
            <a href="#projects" onClick={closeMenu}>
              Projects
            </a>
          </li>
          <li className="nav__items mx__15">
            <a href="#contact" onClick={closeMenu}>
              Contact
            </a>
          </li>
        </ul>
        <Hamburger
          className="hamburger-react"
          color="white"
          direction="right"
          rounded
          onToggle={handleClick}
        />
      </div>
    </div>
  );
};

export default Navbar;

CSS样式代码 #

.parent {
  height: 124px;
}

img {
  padding-top: 5px;
}

.nav__items {
  font-size: 18px;
}

.nav-menu {
  display: flex;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-link {
  color: #fff;
}

ul a {
  display: inline-block;
  position: relative;
  padding: 1.5em 0;
}

ul a:hover {
  color: #f9004d;
}

ul a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.2em;
  background-color: #f9004d;
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}

ul a:hover::after,
ul a:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.2em, 0);
}

/* Scale from center */
ul a::after {
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
}

ul a:hover::after,
ul a:focus::after {
  transform: scale(1);
}

.hamburger-react {
  display: none;
  position: fixed;
  /* top: 3.2rem; */
  top: 1rem;
  right: 2rem;
  transition: 0.4s all ease;
  cursor: pointer;
}

.hamburger-react.active {
  position: fixed;
  /* z-index: 1000; */
  top: 1.5rem;
  right: 2rem;
}

.header {
  transition: 0.4s all ease;
}

.header.active {
  position: fixed;
  z-index: 1;
  width: 100%;
  padding: 0px 30px;
  background-color: #010101;
}

@media only screen and (max-width: 960px) {
  .hamburger-react {
    display: block;
    z-index: 2;
  }

  .nav-menu {
    position: fixed;
    right: -100%;
    flex-direction: column;
    justify-content: center;
    background-color: #010101;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: 0.4s;
    top: 0%;
  }

  .nav-menu.active {
    right: 0;
    z-index: 1;
  }

  .nav__items {
    font-size: 1.5rem;
  }
}

解决方案 #

问题核心是hamburger-react组件没有和状态变量click绑定，导致closeMenu将click设为false时，组件无法感知状态变化，图标保持打开状态。

只需给<Hamburger>组件添加toggle={click}属性，让组件的开合状态完全由click变量控制：

<Hamburger
  className="hamburger-react"
  color="white"
  direction="right"
  rounded
  toggle={click} // 新增该行代码
  onToggle={handleClick}
/>

修改后，点击菜单链接触发closeMenu设置click=false时，汉堡组件会自动同步状态，将图标还原为初始条形样式。

内容的提问来源于stack exchange，提问作者Chris