reactjs 如何在单击时添加一个类，并从所有其他元素中删除同一个类？

sycxhyv7 于 2022-11-29 发布在 React

关注(0)|答案(3)|浏览(154)

我有一个按钮导航，当你点击一个按钮时，活动类被添加。我的目标是将活动类添加到点击的按钮，但删除所有其他按钮（如果存在）上的活动类。“关于”按钮将在页面加载时有一个活动类。
不知道如何将其转换为React，在JavaScript中，单击时我会从循环中的所有元素中删除该类，并向单击的目标添加一个类（如果它还没有活动类）。
代码沙盒-https://codesandbox.io/s/toggle-active-on-class-clicked-remove-from-the-rest-r467l1?file=/src/App.js

export default function Header() {
  const [active, setActive] = useState(true);

  const toggleColor = function (e) {
    // on load, 'About' button has active class
    // when clicking another menu item add active class, remove active from the rest of buttons
    console.log(e.target);
  };

  return (
    <header className="header-img-container">
      <nav>
        <ul>
          <li>
            <button onClick={toggleColor} className={active ? "active" : ""}>
              About
            </button>
          </li>
          <li>
            <button onClick={toggleColor}>Skills</button>
          </li>
          <li>
            <button onClick={toggleColor}>Projects</button>
          </li>
          <li>
            <button onClick={toggleColor}>Words</button>
          </li>
        </ul>
      </nav>
    </header>
  );
}

reactjs

来源：https://stackoverflow.com/questions/74595261/how-to-add-a-class-on-click-and-remove-the-same-class-from-all-other-elements

3条答案

按热度按时间

k5ifujac1#

有很多方法可以解决这个问题。如果你觉得这个方法符合你的要求，你可以试试。

import "./styles.css";

import { useState } from "react";

const list = ["About", "Skills", "Projects", "Words"];

export default function Header() {
  const [activeLink, setActiveLink] = useState("About");

  return (
    <header className="header-img-container">
      <nav>
        <ul>
          {list.map((item) => (
            <li key={item}>
              <button
                onClick={() => setActiveLink(item)}
                className={activeLink === item ? "active" : ""}
              >
                {item}
              </button>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
}

赞(0）回复(0）举报 2022-11-29

bd1hkmkf2#

创建这样的状态

const [active, setActive] = useState({About: true, Skills: false, Projects: false, Words: false})

改变局部参数来添加一个类到元素。

<li>
  <button onClick={() => {
    setActive({...active, About: false, Skills: true, Projects: false, 
    Words: false })
    }}>Skills</button>
</li>

赞(0）回复(0）举报 2022-11-29

mefy6pfw3#

有许多可能的方法，下面是一个基本示例，它使用对象类型active state来存储每个列表项的值。

const [active, setActive] = useState({ About: true })

列表数据存储在一个数组中，因此可以在组件的JSX部分中进行Map。

const itemList = ["About", "Skills", "Projects", "Words"]

虽然index不是理想的key，但在此仅作为示例使用。

{
  itemList.map((item, index) => (
    <li key={index}>
      <button
        onClick={() => toggleColor(item)}
        className={active[item] ? "active" : ""}
      >
        {item}
      </button>
    </li>
  ));
}

toggleColor设置active的值，并且它指定active应该始终采用{About: true}、{Skills: true}等格式。!!!涵盖对象中不存在某些键的情况。

const toggleColor = function (item) {
  setActive((prev) => {
    return { [item]: !!!prev[item] };
  });
};

下面是完整的示例，为了方便起见，它在代码段中运行。
第一个

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 如何在单击时添加一个类，并从所有其他元素中删除同一个类？

3条答案

相关问题

热门标签

最新问答