在反應中僅更改單個元素類

所以我對這個有問題。我需要將此類“活動”僅添加到單個 li 元素 onClick。我知道我需要獲取單擊的確切 li 元素的 id，但我不確定如何執行此操作。此外，我希望頁面啟動后第一個 li 元素（Home）在開始時處于活動狀態。這是我現在擁有的代碼：

import React, { useState, useEffect } from "react";

function NavBar() {
  const [isActive, setActive] = useState("false");

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

  return (
    <section id="main">
      <div className="navigation">
        <ul>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="home-outline"></ion-icon>
              </span>
              <span className="text">Home</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="person-outline"></ion-icon>
              </span>
              <span className="text">Profile</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="chatbubble-outline"></ion-icon>
              </span>
              <span className="text">Mesaages</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="camera-outline"></ion-icon>
              </span>
              <span className="text">Photos</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="settings-outline"></ion-icon>
              </span>
              <span className="text">Settings</span>
            </a>
          </li>
          <div className="indicator"></div>
        </ul>
      </div>
    </section>
  );
}
export default NavBar;

先感謝您。

uj5u.com熱心網友回復：

這樣，您會看到每次單擊元素時，我都會在右側顯示：“IM ACTIVE”

import React, { useState, useEffect } from "react";

const ListItem = ({ isActive, onClick, icon, name }) => {
  // const className = `list${isActive ? " active" : ""}`;
  // console.log(`${name} = ${className}`)
  // will console.log:
  // Unactive -> EXAMPLE: Home = list
  // Active -> EXAMPLE: Home = list active

  return (
    <li
      onClick={onClick}
      //  className={className}
    >
      <a href="#">
        <span className="icon">
          <ion-icon name={icon} />
        </span>
        <span className="text">{name} {isActive ? 'IM ACTIVE': ''}</span>
      </a>
    </li>
  );
};

function NavBar() {
  const [activeElem, setActive] = useState("Home");

  const handleToggle = (newValue) => {
    setActive(newValue);
  };

  console.log("active>>", activeElem);

  return (
    <section id="main">
      <div className="navigation">
        <ul>
            <ListItem
              key="Home"
              isActive={activeElem === "Home"}
              onClick={() => handleToggle("Home")}
              icon="home-outline"
              name="Home"
            />
            <ListItem
              key="Profile"
              isActive={activeElem === "Profile"}
              onClick={() => handleToggle("Profile")}
              icon="person-outline"
              name="Profile"
            />
            <ListItem
              key="Messages"
              isActive={activeElem === "Messages"}
              onClick={() => handleToggle("Messages")}
              icon="chatbubble-outline"
              name="Messages"
            />
            <ListItem
              key="Photos"
              isActive={activeElem === "Photos"}
              onClick={() => handleToggle("Photos")}
              icon="camera-outline"
              name="Photos"
            />
            <ListItem
              key="Settings"
              isActive={activeElem === "Settings"}
              onClick={() => handleToggle("Settings")}
              icon="settings-outline"
              name="Settings"
            />
          <div className="indicator"></div>
        </ul>
      </div>
    </section>
  );
}

然后，你可以用那個isActive道具做任何你想做的事

標籤：javascript 反应

上一篇：javascript陣列控制元件應該怎么做

下一篇：C++高性能網路服務保姆級教程