React按钮选中效果实现：点击添加active-btn类名

在React里直接用classList.add操作DOM行不通，因为React是数据驱动视图的，直接修改DOM的操作会被后续的重新渲染覆盖。正确的做法是用状态来管理选中的按钮，动态生成类名。

实现步骤： #

• 用useState声明状态，存储当前选中的按钮value值
• 修改loadTab函数，点击时更新选中状态
• 给每个按钮的className和aria-selected属性做动态判断，匹配选中状态时添加active-btn类并设置aria-selected="true"

完整代码示例： #

import { useState } from 'react';

function YourComponent() {
  // 初始化选中第一个按钮（value=1）
  const [activeTab, setActiveTab] = useState(1);

  const loadTab = (value) => {
    // 更新选中状态
    setActiveTab(parseInt(value));
    // 这里可以保留你原本的loadTab逻辑，比如加载对应tab内容
  };

  return (
    <div className="shop-page product-details">
      <div className="product-info-tabs prod-tabs">
        <div className="container clearfix nav">
          <div className="nav-items nav-pills tab-btns" role="tablist" aria-multiselectable="true">
            <button
              className={`nav-link nav-pills tab-btn ${activeTab === 1 ? 'active-btn' : ''}`}
              role="tab"
              value={1}
              onClick={(e) => loadTab(e.target.value)}
              aria-selected={activeTab === 1}
            >
              Car Service
            </button>
            <button
              className={`nav-link nav-pills tab-btn ${activeTab === 2 ? 'active-btn' : ''}`}
              role="tab"
              value={2}
              onClick={(e) => loadTab(e.target.value)}
              aria-selected={activeTab === 2}
            >
              Denting & Painting
            </button>
            <button
              className={`nav-link nav-pills tab-btn ${activeTab === 3 ? 'active-btn' : ''}`}
              role="tab"
              value={3}
              onClick={(e) => loadTab(e.target.value)}
              aria-selected={activeTab === 3}
            >
              Mechnical & Electrical Repair
            </button>
            <button
              className={`nav-link nav-pills tab-btn ${activeTab === 4 ? 'active-btn' : ''}`}
              role="tab"
              value={4}
              onClick={(e) => loadTab(e.target.value)}
              aria-selected={activeTab === 4}
            >
              Add Ons
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default YourComponent;

关键说明： #

• 用模板字符串${}动态拼接类名，当activeTab等于当前按钮的value时，自动添加active-btn类
• aria-selected直接传入布尔值，React会自动转换为对应的字符串"true"或"false"，保持语义化
• 所有按钮的选中状态由activeTab统一控制，确保同一时间只有一个按钮处于选中状态

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