ReactJS移除指定元素类名及onClick两次点击问题解决

问题根源拆解 #

1. Home标签硬编码类名：你一开始给Home写死了activeTab类，这会导致哪怕状态更新，这个类也不会自动从Home上移除，所以它一直保持加粗。
2. 点击两次生效：大概率是你的activateTab函数里状态更新逻辑有问题，比如依赖旧状态但没使用函数式更新，或者判断逻辑绕了弯路，导致第一次点击时状态没正确更新。

正确实现方式 #

1. 用状态统一管控所有标签的激活类 #

先把Home上的硬编码activeTab删掉，所有标签的类名都由activeTab状态来决定：

import { useState } from 'react';

function NavTabs() {
  // 初始激活Home，用标识（比如'home'）来对应标签
  const [activeTab, setActiveTab] = useState('home');

  // 点击标签时，直接把对应标识设为激活状态
  const activateTab = (tabKey) => {
    setActiveTab(tabKey);
  };

  // 给每个标签返回对应的类名：匹配激活状态就加activeTab，否则空
  const getTabClassName = (tabKey) => {
    return activeTab === tabKey ? 'activeTab' : '';
  };

  return (
    <nav className="nav-tabs">
      <button 
        className={getTabClassName('home')}
        onClick={() => activateTab('home')}
      >
        Home
      </button>
      <button 
        className={getTabClassName('shop')}
        onClick={() => activateTab('shop')}
      >
        Shop
      </button>
      {/* 剩下三个标签依葫芦画瓢 */}
      <button 
        className={getTabClassName('about')}
        onClick={() => activateTab('about')}
      >
        About
      </button>
      <button 
        className={getTabClassName('contact')}
        onClick={() => activateTab('contact')}
      >
        Contact
      </button>
      <button 
        className={getTabClassName('blog')}
        onClick={() => activateTab('blog')}
      >
        Blog
      </button>
    </nav>
  );
}

2. 解决两次点击生效的问题 #

如果之前你的activateTab是类似下面的错误写法，就会导致点击两次才生效：

// 错误示例：试图通过切换旧状态来更新，逻辑混乱
const activateTab = () => {
  setActiveTab(prev => {
    return prev === 'home' ? 'shop' : 'home';
  });
};

这种写法只适用于两个标签切换，多标签场景下完全不适用，而且会导致状态更新不符合预期。改成上面示例里的写法——点击时直接传入当前标签的标识，每次点击直接把状态设为对应标签的key，就能一次更新到位。

3. 为什么别用refs？ #

React的设计思路是状态驱动UI，用refs直接去改DOM的类名属于绕开React的机制，不仅代码不好维护，还容易出现状态和DOM不一致的bug。用状态控制类名，React会自动帮你重新渲染UI，这才是正确的姿势。

关键总结 #

• 把所有硬编码的activeTab都删掉，统一用状态判断每个标签的类名
• 点击事件直接传递目标标签的标识，确保状态一次更新正确
• 永远用状态驱动UI，别直接操作DOM

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