ReactJS onclick 向另一个元素添加或删除类

Question

我正在努力将我的普通 jQuery 代码转换为 React JS（我是 React 新手）。

我有以下代码：

$(".add").click(function () {
    $("nav").addClass("show");
});
$(".remove").click(function () {
    $("nav").removeClass("show");
});
$(".toggle").click(function () {
    $("nav").toggleClass("show");
});

nav {
  width: 250px;
  height: 150px;
  background: #eee;
  padding: 15px;
  margin-top: 15px;
}
nav.show {
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="add">Add</button>
<button class="remove">Remove</button>
<button class="toggle">Toggle</button>
<nav>Navigation menu</nav>

尝试过的引用似乎只能为同一元素添加/删除类：

https://stackoverflow.com/a/42630743/6191987

How to add or remove a className on event in ReactJS?

那么，如何将相同的 jQuery 方法转换或创建为 ReactJS？

Answer 1

1. 使用状态来跟踪是否显示导航。
2. 在反应代码中使用与状态相对应的类名。
3. React 使用“className”而不是“class”，因为“class”已经是 javascript 中的保留字。

你可以检查这个sandbox link for implementation

function App() {
  const [show, setShow] = React.useState();

  return (
    <div className="App">
      <button className="add" onClick={() => setShow(true)}>
        Add
      </button>
      <button className="remove" onClick={() => setShow(false)}>
        Remove
      </button>
      <button className="toggle" onClick={() => setShow(!show)}>
        Toggle
      </button>
      <nav className={show ? "show" : ""}>Navigation menu</nav>
    </div>
  );
}

Answer 2

您可以将 useRef 用于 nav 并使用每个按钮的事件处理程序来操作 ref（访问 nav 的 DOM）

import React from "react";
import "./styles.css";

export default function App() {
  const navRef = React.useRef(null);

  const onAddClick = (e) => {
    navRef.current.classList.add("show");
  };

  const onRemoveClick = (e) => {
    navRef.current.classList.remove("show");
  };

  const onToggleClick = (e) => {
    navRef.current.classList.toggle("show");
  };

  return (
    <div className="App">
      <button onClick={onAddClick}>Add</button>
      <button onClick={onRemoveClick}>Remove</button>
      <button onClick={onToggleClick}>Toggle</button>
      <nav ref={navRef}>Navigation menu</nav>
    </div>
  );
}

.App {
  font-family: sans-serif;
}

nav {
  width: 250px;
  height: 150px;
  background: #eee;
  padding: 15px;
  margin-top: 15px;
}

nav.show {
  background: red;
  color: white;
}

演示的 Codesanbox 链接

参考：

• Refs and the DOM
• useRef doc
• Element.classList doc