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

Question

I am trying to trigger this CSS open in React the tutorial was in HTML but I cannot use addeventlistner or use document.queryselector so I added an onClick event to the hamburger which should handle both of those issues now I just need to toggle this Class.Please do not mark this as already answered because the answered questions are jquery and regular html related.

Component:

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

You should employ state which is React's way of helping you keep track of the current status of your component (Like when your hamburger is clicked). One of the core concepts behind React is that you define event-listeners for your JSX. So when a user interacts with your application, an event is triggered and thus the state of your component changes.

We use state to help construct your desired functionality. In this case, clicking on the hamburger would toggle the open state and thus we use that state Boolean value to help us toggle the classes of your nav-links list.

There is no need to forcefully interact with the DOM as you would with typical document selectors in vanilla JavaScript.

See working sandbox: 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);