React：使用useState实现单个按钮active类切换的问题求助

你的问题核心在于用单个字符串状态isActive控制所有按钮的类名，导致状态变化时所有按钮同步切换；而且直接操作DOM的classList违背了React状态驱动UI的设计思路。下面是修正方案：

修正思路 #

1. 用状态存储当前激活按钮的ID，而非统一的字符串
2. 点击按钮时，将状态更新为当前按钮的ID
3. 每个按钮根据自身ID和状态值对比，决定是否添加active类

完整代码示例 #

import { useState } from 'react';

// 初始化状态为默认激活的按钮ID，比如首页；也可以设为null表示默认无激活
const [activeBtnId, setActiveBtnId] = useState('homebtn');

const handleClick = (e) => {
  const btnId = e.currentTarget.id;
  // 可选逻辑：点击已激活的按钮时取消激活
  setActiveBtnId(prevId => prevId === btnId ? null : btnId);
  // 如果不需要取消激活，直接写 setActiveBtnId(btnId) 即可
}

导航栏JSX部分：

<div id="navbarlinks" className="d-flex justify-content-end me-5 pe-4">
  <button 
    id="homebtn" 
    onClick={handleClick} 
    className={`btn btn-primary ${activeBtnId === 'homebtn' ? 'active' : ''}`}
  >
    <a href="#" className="text-decoration-none text-white">Home</a>
  </button>
  <button 
    id="aboutbtn" 
    onClick={handleClick} 
    className={`btn btn-primary ${activeBtnId === 'aboutbtn' ? 'active' : ''}`}
  >
    <a href="#" className="text-decoration-none text-white">About Us</a>
  </button>
  <button 
    id="shopbtn" 
    onClick={handleClick} 
    className={`btn btn-primary ${activeBtnId === 'shopbtn' ? 'active' : ''}`}
  >
    <a href="#" className="text-decoration-none text-white">Shop</a>
  </button>
  <button 
    id="contactbtn" 
    onClick={handleClick} 
    className={`btn btn-primary ${activeBtnId === 'contactbtn' ? 'active' : ''}`}
  >
    <a href="#" className="text-decoration-none text-white">Contact Us</a>
  </button>
</div>

额外说明 #

这种写法完全通过React状态控制UI，避免了直接操作DOM，符合React的设计原则，逻辑更清晰也更容易维护。

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