如何使用 React useRef 钩子删除地图中的类

问题描述

我是 React 的新手。我正在尝试向 div 元素添加一个 onClick 事件，该元素将从另一个元素中删除 className。这些元素是地图中循环的一部分。我正在尝试为此使用 useRef 钩子。我特别不想切换 classNames，我想删除它，就是这样。然后使用另一个元素的另一个 onclick 事件将其添加回来。此要求特定于我的应用程序。我当前的代码从最后一个元素中删除了 className，而不是我的目标元素。在此先感谢您的帮助！

import React,{ useState,useEffect,useRef } from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const [kitchenItems,setkitchenItems] = useState([]);

  useEffect(() => {
    axios.get("./data.json").then((res) => {
      setkitchenItems(res.data.kitchen);
    });
  },[]);

  const navRef = React.useRef(null);

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

  return (
    <main>
      {kitchenItems.map((item,index) => (
        <div key={index} className="item">
          <div onClick={onRemoveClick}>
            <h2>{item.name}</h2>
            <p ref={navRef} className="red">
              {item.text}
            </p>
          </div>
        </div>
      ))}
    </main>
  );
}

这是在 CodeSandbox 中： https://codesandbox.io/s/lively-moon-d7mm3

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）