javascript - 如何使用反应在锚链接上设置活动类

Question

我正在对我的项目使用反应。但是我如何使用状态来处理多个元素上的点击事件。单击时，所有元素都具有相同的类。这是一个片段：

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类。但我被困住了。我实际上无法获取当前元素，它应该处于活动状态。

标签： javascriptreactjs

Answer 1

更改您的active状态以记录id而不是布尔值

const [active, setActive] = useState<number | undefined>();

然后使用

<a
  href={"#" + anchor.key}
  key={anchor.id}
  className={anchor.id === active ? "selected" : ""}
  onClick={(e) => handleClick(e, anchor.id)}
>

和

function handleClick(e: React.MouseEvent<HTMLAnchorElement>, id: number) {
  e.stopPropagation()
  setActive(id)
}