React实现点击按钮添加active类并移除其他按钮同类

问题描述 #

我有一个按钮导航栏，需求是点击按钮时为该按钮添加active类，同时移除其他所有按钮上的active类。页面加载时“About”按钮默认带有active类。我知道原生JS可以通过循环移除所有元素的该类后给目标添加，但不清楚React里怎么实现，当前代码如下：

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>
  );
}

解决方案 #

React里不需要直接操作DOM，通过状态管理就能实现需求，核心是用状态存储当前激活的按钮标识，而非单纯的布尔值：

1. 修改状态定义：把active状态从布尔值改成存储按钮的唯一标识（比如按钮文本），初始值设为'About'，对应默认激活的按钮。
2. 更新点击事件：让点击事件接收按钮的标识，点击时更新状态为该标识。
3. 动态设置类名：每个按钮判断当前active状态是否等于自己的标识，匹配则添加active类。

修改后的完整代码 #

import { useState } from 'react';

export default function Header() {
  // 用按钮文本作为激活标识，默认激活About
  const [activeBtn, setActiveBtn] = useState('About');

  const toggleActive = (btnName) => {
    setActiveBtn(btnName);
  };

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

优化版（循环渲染导航项） #

如果按钮数量较多，可把导航项做成数组循环渲染，避免重复代码：

import { useState } from 'react';

export default function Header() {
  const [activeBtn, setActiveBtn] = useState('About');
  // 定义导航项数组
  const navItems = ['About', 'Skills', 'Projects', 'Words'];

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

这样不管点击哪个按钮，状态都会更新为对应的按钮标识，所有按钮会根据状态自动判断是否添加active类，完全符合需求。

内容的提问来源于stack exchange，提问作者seandaniel