React.js 如何使汉堡包图标菜单功能与单击一起使用？

Question

我一直在关注 Html、CSS 和 JS 中的 Youtube 制作响应式导航栏的编码教程。
虽然我真的很想在 React 中重新制作它，但汉堡包图标在我之前用纯 Html、CSS 和 JS Click here to see the example 制作时完美无缺。（在移动视图中切换浏览器以查看汉堡包图标）

但是当我在 React 中复制我所有的代码时（如下）：

import React, { Component } from "react";
import "./style/navbar.css";
import { Link } from "react-router-dom";

class navbar extends Component {
  render() {
    const navslide = () => {
      const burger = document.querySelector(".burger");
      const nav = document.querySelector(".nav-links");
      const navLinks = document.querySelectorAll(".nav-links li");
      burger.addEventListener("click", () => {
        nav.classList.toggle("nav-active");

        navLinks.forEach((link, index) => {
          if (link.style.animation) {
            link.style.animation = "";
          } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
              0.5}s`;
          }
        });

        burger.classList.toggle("toggle");
      });
    };

    return (
      <div>
        <nav>
          <div className="logo">
            <h3>College Facemash</h3>
          </div>
          <ul className="nav-links">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/login">Login / Signup</Link>
            </li>
          </ul>
          <div className="burger" onClickCapture={navslide}>
            <div className="line1"></div>
            <div className="line2"></div>
            <div className="line3"></div>
          </div>
        </nav>
      </div>
    );
  }
}

export default navbar;

它运行良好，但单击时无法正常工作。相反，它确实需要双击才能运行。

Click here to see the demo。（在移动视图中切换浏览器以查看汉堡包图标）

那么，我应该做哪些更改才能使我的代码完美运行

你的帮助对我来说真的很有价值。
谢谢...

Answer 1

这样试试：

class Navbar extends Component {
    const navslide = () => {
      const nav = document.querySelector(".nav-links");
      const navLinks = document.querySelectorAll(".nav-links li");
      nav.classList.toggle("nav-active");
      navLinks.forEach((link, index) => {
          if (link.style.animation) {
            link.style.animation = "";
          } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
          }
        });

        burger.classList.toggle("toggle");
      });
    };
  render() { 
    return (
      <div>
        <nav>
          <div className="logo">
            <h3>College Facemash</h3>
          </div>
          <ul className="nav-links">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/login">Login / Signup</Link>
            </li>
          </ul>
          <div className="burger" onClick={() => navslide()}>
            <div className="line1"></div>
            <div className="line2"></div>
            <div className="line3"></div>
          </div>
        </nav>
      </div>
    );
  }
}

Answer 2

为什么调用 burger.addEventListener("click") 而您的函数运行会点击汉堡包！这就是为什么它需要 2 次点击运行!

import React, { Component } from "react";
    import "./style/navbar.css";
    import { Link } from "react-router-dom";

    class navbar extends Component {
      render() {
        const navslide = () => {
          const burger = document.querySelector(".burger");
          const nav = document.querySelector(".nav-links");
          const navLinks = document.querySelectorAll(".nav-links li");
            nav.classList.toggle("nav-active");

            navLinks.forEach((link, index) => {
              if (link.style.animation) {
                link.style.animation = "";
              } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
                  0.5}s`;
              }
            });

            burger.classList.toggle("toggle");
        };

        return (
          <div>
            <nav>
              <div className="logo">
                <h3>College Facemash</h3>
              </div>
              <ul className="nav-links">
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/login">Login / Signup</Link>
                </li>
              </ul>
              <div className="burger" onClick={navslide}>
                <div className="line1"></div>
                <div className="line2"></div>
                <div className="line3"></div>
              </div>
            </nav>
          </div>
        );
      }
    }

    export default navbar;

我还建议向您的组件添加状态，并在单击 ham 时更改它！然后你可以根据这个状态改变元素类。

React.js 如何使汉堡包图标菜单功能与单击一起使用？

How to make Hamburger Icon menu function to work with single click in React.js?

reactjs

responsive-design

navbar

hamburger-menu

react-state