reactjs - 将事件类添加到 react 中的li项目

Question

我知道 SO 上已经有针对这个问题的各种解决方案。但我无法让它发挥作用。

const [isActive, setActive] = useState(false);

const toggleClass = () => {
  setActive(!isActive);
};



<ul>
  <li>className="nav-item "><a href="#!" 
                className={isActive ? 'm-active nav-link': "nav-link"} 
                onClick={toggleClass} 
                data-toggle="tab"
                id=1>POSTS</a>
  </li>
  <li>........className={isActive ? 'm-active nav-link': "nav-link"} 
     onClick={toggleClass}.............................</li>
  <li>........className={isActive ? 'm-active nav-link': "nav-link"} 
     onClick={toggleClass}.............................</li>
  <li>........className={isActive ? 'm-active nav-link': "nav-link"} 
     onClick={toggleClass}.............................</li>
</ul>

所以，现在当我单击任何 li 项目时，它会选择其他 li 项目并将其添加到 m-active className这看起来像你可以在这里看到。 enter image description here

发生这种情况是因为它不知道要选择哪个 li仅将 m-active 类添加到具有相同 id 但我不知道如何仅针对函数传递的具有相同 id 的 li 标记

 const toggleClass = (id) => {
    setActive(!isActive);
 };

 <li>className="nav-item "><a href="#!" 
                className={isActive ? 'm-active nav-link': "nav-link"} 
                onClick={() => toggleClass(1)} 
                data-toggle="tab"
                id=1>POSTS</a>

请看看你能不能帮我解决这个问题，或者你是否有其他想法来解决这个问题

Answer 1

您可以跟踪 active Li id 并在此基础上添加事件类。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const values = [
    { id: 1, text: "LI-1" },
    { id: 2, text: "LI-2" },
    { id: 3, text: "LI-3" },
    { id: 4, text: "LI-4" }
  ];
  const [activeId, setActiveId] = useState();

  return (
    <div className="App">
      <ul>
        {values.map((val) => (
          <li onClick={() => setActiveId(val.id)}>
            {val.text} -- {activeId === val.id ? "Active" : "Inactive"}
          </li>
        ))}
      </ul>
    </div>
  );
}

工作演示 - https://codesandbox.io/s/naughty-sinoussi-bmy4p?file=/src/App.js:0-543