如何在React中实现点击li按钮添加active类并移除其他元素同类

要实现点击li按钮时为当前项添加active类、移除其他项的active类，核心思路是用React的状态管理当前激活的选项，渲染时根据状态动态控制元素的类名。以下是具体实现方案：

函数组件实现（推荐，React 16.8+） #

这种方式使用useState钩子维护状态，代码更简洁：

import { useState } from 'react';

function TabList() {
  // 初始化激活状态，默认选中第一个选项
  const [activeTab, setActiveTab] = useState('all');

  // 把所有选项整理成数组，方便统一渲染和维护
  const tabs = [
    { key: 'all', label: '全部' },
    { key: 'draft', label: '草稿' },
    { key: 'assessment', label: '审核中' },
    { key: 'needData', label: '需补充数据' },
    { key: 'ready', label: '已就绪' }
  ];

  return (
    <ul>
      {tabs.map(tab => (
        <li
          key={tab.key}
          // 动态判断是否添加active类
          className={activeTab === tab.key ? 'active' : ''}
          // 点击时更新激活状态为当前选项的key
          onClick={() => setActiveTab(tab.key)}
        >
          {tab.label}
        </li>
      ))}
    </ul>
  );
}

export default TabList;

类组件实现 #

如果项目仍在使用类组件，也可以用这种方式：

import React, { Component } from 'react';

class TabList extends Component {
  // 初始化激活状态
  state = {
    activeTab: 'all'
  };

  // 选项数据
  tabs = [
    { key: 'all', label: '全部' },
    { key: 'draft', label: '草稿' },
    { key: 'assessment', label: '审核中' },
    { key: 'needData', label: '需补充数据' },
    { key: 'ready', label: '已就绪' }
  ];

  // 处理点击事件，更新激活状态
  handleTabClick = (key) => {
    this.setState({ activeTab: key });
  };

  render() {
    const { activeTab } = this.state;
    return (
      <ul>
        {this.tabs.map(tab => (
          <li
            key={tab.key}
            className={activeTab === tab.key ? 'active' : ''}
            onClick={() => this.handleTabClick(tab.key)}
          >
            {tab.label}
          </li>
        ))}
      </ul>
    );
  }
}

export default TabList;

核心逻辑说明 #

1. 状态管理：用useState（函数组件）或state（类组件）记录当前激活选项的唯一标识（比如示例中的key值）
2. 动态类名：通过三元表达式判断当前选项的标识是否与激活状态匹配，匹配则添加active类
3. 事件绑定：给每个li绑定点击事件，触发时更新激活状态为当前选项的标识，React会自动重新渲染组件，完成类名切换

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