Как заставить функцию меню Hamburger Icon работать одним щелчком мыши в React. js? - PullRequest
Новая
       97

Как заставить функцию меню Hamburger Icon работать одним щелчком мыши в React. js?

0 голосов
/ 13 января 2020

Я следовал учебному пособию по созданию отзывчивого Навбара с Youtube в Html, CSS и JS.
Хотя я действительно хотел изменить его снова в реакции, значок гамбургера ранее работал безупречно, когда я сделал это просто 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;

он работал хорошо, но не работал в один клик. Вместо этого потребовался двойной щелчок, чтобы работать.

Нажмите здесь, чтобы увидеть демонстрацию . (Переключите браузер в мобильном представлении, чтобы увидеть значок гамбургера)

Итак, что изменения, которые я должен сделать, чтобы мой код работал безупречно

Ваша помощь будет очень полезна для меня.
Спасибо ...

Ответы [ 2 ]

1 голос
/ 13 января 2020

Попробуй так: 

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>
    );
  }
}
0 голосов
/ 13 января 2020

зачем вызывать 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! и затем вы можете изменить классы элементов в зависимости от этого состояния.

...