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

Posted 2023-02-22

【中文标题】如何使用 React useRef 挂钩删除地图中的类

【英文标题】：How to use React useRef hook for removing classes within map

【发布时间】：2021-05-12 09:10:03

【问题描述】：

我是 React 新手。我正在尝试将 onClick 事件添加到 div 元素，该元素将从另一个元素中删除 className。这些元素是地图中循环的一部分。我正在尝试为此使用 useRef 挂钩。我特别不想切换类名，我想删除它，就是这样。然后使用来自另一个元素的另一个 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

【问题讨论】：

useState Hook 可以解决。您可以通过使用它实现 useState 和 Booleans 来切换。这是适合您项目的解决方案。

感谢您的回复。问题是在我的真实应用程序中，onClick 事件位于具有 contenteditable 属性的元素上。因此我不能使用切换开关。

【参考方案1】：

将项目是否应具有类的指示符保存到kitchenItems 状态。删除参考。

  useEffect(() => 
    axios.get("./data.json").then((res) => 
      setkitchenItems(res.data.kitchen.map(item => ( ...item, red: true )));
    );
  , []);

const onRemoveClick = (i) => 
  setkitchenItems(
    kitchenItems.map((item, j) => j !== i ? item : ( ...item, red: false ))
  );
;

<div onClick=() => onRemoveClick(i)>
  <h2>item.name</h2>
  <p className=item.red ? 'red' : ''>

【参考方案2】：

你处理这个的方式是用 jQuery 完成的，你改变 dom 元素。在 React 中，您将改为更新状态并让组件呈现。我已在您的对象上添加了一个新属性，但如果您愿意，您可以有另一个列表或其他一些逻辑。

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 onRemoveClick = (index) => 
    debugger;
    const tmpItems = [...kitchenItems];
    tmpItems[index].isRed = !tmpItems[index].isRed;
    setkitchenItems(tmpItems);
  ;

  return (
    <main>
      kitchenItems.map((item, index) => (
        <div key=index className="item">
          <div onClick=() => onRemoveClick(index)>
            <h2>item.name</h2>
            <p className=item.isRed ? "red" : "">item.text</p>
          </div>
        </div>
      ))
    </main>
  );

在 CodeSandbox 中：https://codesandbox.io/s/keen-kirch-55whe?file=/src/App.js

【讨论】：

感谢您的回复！问题是在我的真实应用程序中，onClick 事件位于具有 contenteditable 属性的元素上。因此我不能使用切换开关。