我是 React 的新手。我正在尝试将 onClick 事件添加到 div 元素,该事件将从另一个元素中删除 className。这些元素是 map 中循环的一部分。我正在尝试为此使用 useRef Hook 。我特别不想切换类名,我想删除它,仅此而已。然后用来自另一个元素的另一个 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
最佳答案
将指示项目是否应具有类的指示器保存到 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' : ''}>
关于javascript - 如何使用 React useRef 钩子(Hook)删除 map 中的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66107097/