我在 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%)
    }
}

Answer 1

你應該使用state ，這是 React 幫助你跟蹤組件當前狀態的方式（比如當你的漢堡被點擊時）。 React 背后的核心概念之一是為 JSX 定義事件偵聽器。 因此，當用戶與您的應用程序交互時，會觸發一個事件，從而更改組件的state 。

我們使用state來幫助構建您想要的功能。 在這種情況下，單擊漢堡包將切換open state ，因此我們使用該state布爾值來幫助我們切換導航鏈接列表的類。

不需要像使用普通 JavaScript 中的典型文檔選擇器那樣強制與DOM交互。

查看工作沙箱： 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);