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

Question

我是 React 新手。我正在尝试向 div 元素添加一个 onClick 事件，该事件将从另一个元素中删除 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

Answer 1

将项目是否应具有 class 或不具有 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' : ''}>

Answer 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

Answer 3

为什么不直接使用 pureJS？

const onRemoveClick = (e) => {
    var target = e.target;
    if (target) {
      if (target.classList && target.classList.contains("red")) {
        target.classList.remove("red");
      } else {
        target.classList.add("red");
      }
    }
  };

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

How to use React useRef hook for removing classes within map

javascript

json

reactjs

react-hooks

use-ref

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

How to use React useRef hook for removing classes within map

javascript

json

reactjs

react-hooks

use-ref

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