React点击元素时添加类名并移除其他元素类名的实现方法

Hey Aleksf, 针对你的需求，其实在React结合Ant Design的Menu组件时，我们可以通过状态管理来轻松实现这个「点击当前元素添加选中类，移除其他元素同类」的效果，不用手动去操作DOM哦！下面是具体的实现方案：

方式一：手动控制className（适合自定义类名场景） #

如果你的需求是自定义类名（不是Ant Design默认的ant-menu-item-selected），或者想完全手动控制选中状态，可以用这种方式：

1. 初始化组件状态 #

在你的类组件中，添加一个状态来记录当前选中的菜单项key：

constructor(props) {
  super(props);
  this.state = {
    selectedKey: '1' // 初始选中第一个菜单项，对应你代码里的key="1"
  };
}

2. 编写点击事件处理函数 #

给外层<Menu>绑定点击事件，更新选中的key：

handleMenuClick = (e) => {
  // e.key就是当前点击的Menu.Item的唯一标识
  this.setState({
    selectedKey: e.key
  });
}

3. 动态绑定className #

给每个<Menu.Item>根据当前选中状态设置className：

<Menu onClick={this.handleMenuClick}>
  <Menu.ItemGroup key="g1" title={<div dangerouslySetInnerHTML={this.logoMenu()}></div>}>
    <Menu.Item 
      key="1" 
      icon={<HomeOutlined/>} 
      className={this.state.selectedKey === '1' ? 'ant-menu-item-selected' : ''}
    >
      <a href="/">1</a>
    </Menu.Item>
    <Menu.Item 
      key="2" 
      icon={<BookOutlined/>}
      className={this.state.selectedKey === '2' ? 'ant-menu-item-selected' : ''}
    >
      <a href="/home">2</a>
    </Menu.Item>
    <Menu.Item 
      key="3" 
      icon={<AppstoreOutlined/>}
      className={this.state.selectedKey === '3' ? 'ant-menu-item-selected' : ''}
    >
      <a href="/test">3</a>
    </Menu.Item>
    <Menu.Item 
      key="4" 
      icon={<SearchOutlined/>}
      className={this.state.selectedKey === '4' ? 'ant-menu-item-selected' : ''}
    >
      <a href="/search">4</a>
    </Menu.Item>
  </Menu.ItemGroup>
</Menu>

方式二：使用Ant Design Menu内置的选中机制（推荐） #

其实Ant Design的Menu组件本身就内置了选中状态管理，完全不用手动加className，直接通过selectedKeys属性就能实现需求，代码更简洁：

constructor(props) {
  super(props);
  this.state = {
    selectedKey: '1' // 初始选中项
  };
}

handleMenuClick = (e) => {
  this.setState({
    selectedKey: e.key
  });
}

// 渲染部分
<Menu 
  selectedKeys={[this.state.selectedKey]} 
  onClick={this.handleMenuClick}
>
  <Menu.ItemGroup key="g1" title={<div dangerouslySetInnerHTML={this.logoMenu()}></div>}>
    <Menu.Item key="1" icon={<HomeOutlined/>}><a href="/">1</a></Menu.Item>
    <Menu.Item key="2" icon={<BookOutlined/>}><a href="/home">2</a></Menu.Item>
    <Menu.Item key="3" icon={<AppstoreOutlined/>}><a href="/test">3</a></Menu.Item>
    <Menu.Item key="4" icon={<SearchOutlined/>}><a href="/search">4</a></Menu.Item>
  </Menu.ItemGroup>
</Menu>

这种方式是组件库的原生实现，不仅能自动给选中项加上ant-menu-item-selected类，还能避免手动操作DOM可能带来的问题，非常推荐使用~

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