时间戳

首页 > 解决方案 > 如何使汉堡图标菜单功能在 React.js 中单击即可使用？

reactjs - 如何使汉堡图标菜单功能在 React.js 中单击即可使用？

问题描述

我一直在关注使用 Html、CSS 和 JS 从 Youtube 制作响应式导航栏的编码教程。
虽然我真的很想在 react 中重新制作它，但之前我用普通的 Html、CSS 和 JS 制作汉堡包图标时，它可以完美地工作点击这里查看示例。（在移动视图中切换浏览器以查看汉堡图标）

但是当我将所有代码复制到反应中时（如下）：

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;

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

单击此处查看演示。（在移动视图中切换浏览器以查看汉堡图标）

那么，我应该做些什么改变才能让我的代码完美运行

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

标签： reactjsresponsive-designnavbarhamburger-menureact-state

解决方案

试试这样：

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>
    );
  }
}

推荐阅读