javascript - 我在 React 中触发这个类列表切换时遇到问题

Question

我试图在 React 中触发这个 CSS 打开教程是在 HTML 中，但我不能使用 addeventlistner 或使用 document.queryselector 所以我向汉堡包添加了一个 onClick 事件，它应该处理这两个问题，现在我只需要切换这个类。请不要将此标记为已回答，因为已回答的问题与 jquery 和常规 html 相关。

零件：

const Navbar = props => {
  const hamburger = document.querySelector('.hamburger');
  const navLinks = document.querySelector('.nav-links');
  const links = document.querySelectorAll('nav-links li');

  // hamburger.addEventListener('click', () => {
  //   navLinks.classList.toggle("open")
  // });
  useEffect(() => {


  }, []);

  return (
    <div>
      <nav>
        <div onCLick={//I want to toggle the open class on click} className="hamburger">
          <div className="line"></div>
          <div className="line"></div>
          <div className="line"></div>
        </div>
        <ul className="nav-links">
          <li className="nav-links">About</li>
          <li className="nav-links">About</li>
          <li className="nav-links">About</li>
        </ul>
      </nav>
    </div>
  );
};

export default Navbar;

CSS：

nav{
    height: 10vh;
    background: blue !important;
}
.nav-links{
    display: flex;
    list-style: none;
    width: 50%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
}

/* change to classes */
.nav-links li a{
    color: white;
    text-decoration: none;
    font-size: 16px
}

.landing{
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing h1{
    margin: 100px;
    font-size: 50px;
}

@media screen and (max-width: 768px){
    .nav-links{
        position: fixed;
        background: red;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        display: none;
        clip-path: circle(100px at 90% 10%);
        -webkit-clip-path: circle(100px at 90% 10%);
        z-index: 99999;
        transition: all 1s ease-out
    }

    .nav-links.open{
        clip-path: circle(1000px at 90% 10%);
        -webkit-clip-path: circle(1000px at 90% 10%);
    }

    .line{
        width: 30px;
        height: 3px;
        background: white;
        margin: 5px
    }

    nav{
        position: relative
    }

    .hamburger{
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%,-50%)
    }
}

标签： javascriptreactjsdom

Answer 1

你应该使用stateReact 的方式来帮助你跟踪组件的当前状态（比如当你的汉堡被点击时）。React 背后的核心概念之一是为 JSX 定义事件侦听器。因此，当用户与您的应用程序交互时，会触发一个事件，因此state您的组件会发生变化。

我们state用来帮助​​构建您想要的功能。在这种情况下，单击汉堡包会切换open state，因此我们使用该state布尔值来帮助我们切换导航链接列表的类。

无需DOM像使用普通 JavaScript 中的典型文档选择器那样强制交互。

查看工作沙箱：https ://codesandbox.io/s/cool-wildflower-94e6q

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Navbar = props => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <nav>
        <div onClick={() => setOpen(!open)} className="hamburger">
          <div className="line" />
          <div className="line" />
          <div className="line" />
        </div>

        <ul className={open ? "nav-links" : "hide"}>
          <li className="nav-links">About</li>
          <li className="nav-links">About</li>
          <li className="nav-links">About</li>
        </ul>
      </nav>
    </div>
  );
};

export default Navbar;

const rootElement = document.getElementById("root");
ReactDOM.render(<Navbar />, rootElement);