我正在我的项目上使用react。但是我如何使用state处理多个元素上的click事件。在click时所有元素都有相同的类。下面是一个片段:
const anchors = [
{
id: 1,
name: "Дансны үйлчилгээ",
key: "account-service",
},
{
id: 2,
name: "Зээлийн үйлчилгээ",
key: "loan-service",
},
{
id: 3,
name: "Картын үйлчилгээ",
key: "card-service",
},
{
id: 4,
name: "Даатгалын зуучлалын үйлчилгээ",
key: "insurance-service",
},
{
id: 5,
name: "Цахим банкны үйлчилгээ",
key: "bank-service",
},
{
id: 6,
name: "Mэдээлэл шинэчлэх",
key: "profile-service",
},
];
循环数组:
<div className="positions">
{anchors.map((anchor: any) => {
return (
<a
href={"#" + anchor.key}
key={anchor.id}
className={active ? "selected" : ""}
onClick={(event: any) => handleClick(event)}
>
<img src="/images/arrow-right.svg" />
<span>{anchor.name}</span>
</a>
);
})}
</div>
我的重点是
const [active, setActive] = useState<boolean>(false);
处理事件:
function handleClick(e: any) {
if (e.currentTarget) setActive(!active);
else return;
e.stopPropagation();
}
我想要的是,当我点击锚时,它应该是active
类。但是我卡住了。我实际上不能得到当前元素,它应该是活动的。
2条答案
按热度按时间gojuced71#
更改
active
状态以记录id
而不是布尔值然后使用
以及
owfi6suc2#
首先,我建议对像这样小的东西使用任何种类的“状态”。
例如,您可以通过在Next.js中执行以下操作轻松获得active的布尔值(它基本上具有与react相同的路由器API):
然后,您可以基于这个布尔值添加一个“active”类,或者执行其他操作,例如禁用link元素。
最简单的方法来让这个工作在一个干的方式是通过为您的链接这样一个 Package 器: