如何使Hamburger Icon菜单功能在React.js中单击即可工作？

Question

我一直在用Html，CSS和JS编写从Youtube制作响应式Navbar的编码教程。虽然我真的很想重新制作它，但是当我使用纯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")！这就是为什么需要两次单击才能运行！

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;

另外，我建议向您的组件添加状态，并在单击火腿时对其进行更改！然后您可以根据此状态更改元素类。