Javascript I'；我在React中触发此类列表切换时遇到问题

我试图在React中触发此CSS打开教程是HTML的，但我不能使用addeventlistner或使用document.queryselector，因此我在hamburger中添加了一个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;

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

---

您应该使用

state

，这是React帮助您跟踪组件当前状态的方法（如单击汉堡时）。React背后的核心概念之一是为JSX定义事件侦听器。因此，当用户与应用程序交互时，会触发一个事件，因此组件的

状态会发生变化

我们使用
state
来帮助您构建所需的功能。在这种情况下，单击汉堡将切换
打开状态
，因此我们使用该
状态
布尔值来帮助我们切换导航链接列表的类

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

请参见工作沙箱：

import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
常量导航栏=道具=>{
const[open，setOpen]=useState（false）；
返回(
setOpen（！open）}className=“汉堡”>

关于
关于
关于

);
};
导出默认导航栏；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
您应该使用
状态
，这是React帮助您跟踪组件当前状态的方法（如单击汉堡时）。React背后的核心概念之一是为JSX定义事件侦听器。因此，当用户与应用程序交互时，会触发一个事件，因此组件的
状态会发生变化

我们使用
state
来帮助您构建所需的功能。在这种情况下，单击汉堡将切换
打开状态
，因此我们使用该
状态
布尔值来帮助我们切换导航链接列表的类

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

请参见工作沙箱：

import React，{useState，useffect}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
常量导航栏=道具=>{
const[open，setOpen]=useState（false）；
返回(
setOpen（！open）}className=“汉堡”>

关于
关于
关于

);
};
导出默认导航栏；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
显示的代码将明显抛出错误，但未提及任何错误。这些错误是很严重的。我知道有错误，先生。你能告诉我如何从onclick函数切换这个类列表吗？感谢您将修改状态，状态将确定呈现中的类名您将需要useState钩子Yes getting Closer显示的代码将明显抛出错误，但未提及任何错误。这些错误是很严重的。我知道有错误，先生。你能告诉我如何从onclick函数切换这个类列表吗？感谢您将修改状态，状态将确定呈现中的类名您将需要useState钩子Yes越来越近
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);