如何使用 React useRef hook 删除 map 中的类

Question

我是反应新手。 我正在尝试将 onClick 事件添加到 div 元素，该元素将从另一个元素中删除 className。 这些元素是 map 中循环的一部分。 我正在尝试为此使用 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 state 中。 删除参考。

  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 中，您将改为更新 state 并让组件呈现。 我在您的对象上添加了一个新属性，但如果您愿意，您可能有另一个列表或其他一些逻辑。

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