Javascript 如何在单击React时添加类

告诉我，当单击时，如何将类添加到元素中，并将其从其他所有元素中删除

<Menu.ItemGroup key="g1" title={<div dangerouslySetInnerHTML={this.logoMenu()}></div>}>
                        <Menu.Item key="1" icon={<HomeOutlined/>} className="ant-menu-item-selected"><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>

您正在引用这个，所以我假设您在类组件中

import React, { Component } from 'react'
import {
  HomeOutlined,
  BookOutlined,
  AppstoreOutlined,
  SearchOutlined
} from 'icons'

const TitleComponent = ({ title }) => <div>{title}</div>

class YourMenuComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // set your first item as default
      // this gets replaced with whichever item you want to make current
      activeItem: 1
    }

    // this really should be coming through props,
    // or imported as a menuitem.js file
    // By creating your menu items and array of objects you can iterate
    // through each item and create your menu item output
    // key and title are different, assuming you're wanting
    // unique keys and titles may end up being strings
    // (if your menu item titles are unique, you could use those)

    this.menuItems = [
      { title: 1, url: '/', key: 1, icon: HomeOutlined },
      { title: 2, url: '/home', key: 2, icon: BookOutlined },
      { title: 3, url: '/test', key: 3, icon: AppstoreOutlined },
      { title: 4, url: '/search', key: 4, icon: SearchOutlined }
    ]
  }

  // not sure what this looks like, so I'm just shooting a blank
  logoMenu = () => 'some title'

  // this function pushes the current active item to state,
  // and replaces the previous one
  setActiveItem = key => this.setState({ activeItem: key })

  render() {
    const TitleComp = <TitleComponent title={this.logoMenu()} />

    return (

      // you probably want to avoid passing components like
      // this <comp /> and pass them as variables instead
      // small refactor
      <Menu.ItemGroup key="g1" title={TitleComp}>
        {this.menuItems.map(item => (
          <Menu.Item
            key={item.key}
            icon={item.icon}

            // set className on the active item only,
            // and set empty string on inactive items
            className={
              this.state.activeItem === item.key ? 'ant-menu-item-selected' : ''
            }

            // use the current items key to set it as active when clicked
            onClick={() => this.setActiveItem(item.key)}
          >
            <a href={item.url}>{item.title}</a>
          </Menu.Item>
        ))}
      </Menu.ItemGroup>
    )
  }
}

export default YourMenuComponent


import React，{Component}来自“React”
进口{
顺势外倾，
书中概述，
AppStore概述，
搜索概述
}来自“图标”
常量标题组件=（{title}）=>{title}
类YourMenuComponent扩展组件{
建造师（道具）{
超级（道具）
此.state={
//将第一项设置为默认项
//此项将替换为您要使其成为当前项的任何项
活动项目：1
}
//这真的应该通过道具来实现，
//或作为menuitem.js文件导入
//通过创建菜单项和对象数组，可以进行迭代
//浏览每个项目并创建菜单项输出
//键和标题是不同的，假设你想要
//唯一的键和标题可能最终成为字符串
//（如果菜单项标题是唯一的，则可以使用这些标题）
this.menuItems=[
{title:1，url:'/'，key:1，icon:homeooutlined}，
{title:2，url:'/home'，key:2，icon:BookOutlined}，
{title:3，url:'/test'，key:3，icon:AppstoreOutlined}，
{title:4，url:'/search'，key:4，icon:SearchOutlined}
]
}
//我不知道这是什么样子，所以我只是在拍一张空白照片
logoMenu=（）=>“一些标题”
//此功能将当前活动项推送到状态，
//并替换上一个
setActiveItem=key=>this.setState（{activeItem:key}）
render（）{
常数标题组=
返回(
//您可能希望避免传递组件，例如
//这是一个函数，并将其作为变量传递
//小重构
{this.menuItems.map（项=>(
this.setActiveItem（item.key）}
>
))}
)
}
}
导出默认菜单组件
您正在引用这个，所以我假设您在类组件中

import React, { Component } from 'react'
import {
  HomeOutlined,
  BookOutlined,
  AppstoreOutlined,
  SearchOutlined
} from 'icons'

const TitleComponent = ({ title }) => <div>{title}</div>

class YourMenuComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // set your first item as default
      // this gets replaced with whichever item you want to make current
      activeItem: 1
    }

    // this really should be coming through props,
    // or imported as a menuitem.js file
    // By creating your menu items and array of objects you can iterate
    // through each item and create your menu item output
    // key and title are different, assuming you're wanting
    // unique keys and titles may end up being strings
    // (if your menu item titles are unique, you could use those)

    this.menuItems = [
      { title: 1, url: '/', key: 1, icon: HomeOutlined },
      { title: 2, url: '/home', key: 2, icon: BookOutlined },
      { title: 3, url: '/test', key: 3, icon: AppstoreOutlined },
      { title: 4, url: '/search', key: 4, icon: SearchOutlined }
    ]
  }

  // not sure what this looks like, so I'm just shooting a blank
  logoMenu = () => 'some title'

  // this function pushes the current active item to state,
  // and replaces the previous one
  setActiveItem = key => this.setState({ activeItem: key })

  render() {
    const TitleComp = <TitleComponent title={this.logoMenu()} />

    return (

      // you probably want to avoid passing components like
      // this <comp /> and pass them as variables instead
      // small refactor
      <Menu.ItemGroup key="g1" title={TitleComp}>
        {this.menuItems.map(item => (
          <Menu.Item
            key={item.key}
            icon={item.icon}

            // set className on the active item only,
            // and set empty string on inactive items
            className={
              this.state.activeItem === item.key ? 'ant-menu-item-selected' : ''
            }

            // use the current items key to set it as active when clicked
            onClick={() => this.setActiveItem(item.key)}
          >
            <a href={item.url}>{item.title}</a>
          </Menu.Item>
        ))}
      </Menu.ItemGroup>
    )
  }
}

export default YourMenuComponent


import React，{Component}来自“React”
进口{
顺势外倾，
书中概述，
AppStore概述，
搜索概述
}来自“图标”
常量标题组件=（{title}）=>{title}
类YourMenuComponent扩展组件{
建造师（道具）{
超级（道具）
此.state={
//将第一项设置为默认项
//此项将替换为您要使其成为当前项的任何项
活动项目：1
}
//这真的应该通过道具来实现，
//或作为menuitem.js文件导入
//通过创建菜单项和对象数组，可以进行迭代
//浏览每个项目并创建菜单项输出
//键和标题是不同的，假设你想要
//唯一的键和标题可能最终成为字符串
//（如果菜单项标题是唯一的，则可以使用这些标题）
this.menuItems=[
{title:1，url:'/'，key:1，icon:homeooutlined}，
{title:2，url:'/home'，key:2，icon:BookOutlined}，
{title:3，url:'/test'，key:3，icon:AppstoreOutlined}，
{title:4，url:'/search'，key:4，icon:SearchOutlined}
]
}
//我不知道这是什么样子，所以我只是在拍一张空白照片
logoMenu=（）=>“一些标题”
//此功能将当前活动项推送到状态，
//并替换上一个
setActiveItem=key=>this.setState（{activeItem:key}）
render（）{
常数标题组=
返回(
//您可能希望避免传递组件，例如
//这是一个函数，并将其作为变量传递
//小重构
{this.menuItems.map（项=>(
this.setActiveItem（item.key）}
>
))}
)
}
}
导出默认菜单组件
一种常见模式是存储状态，该状态可以表示是否选择了某个项目。您还可以在state中存储类名

const [itemSelected, setItemSelected] = useState('1');

function updateSelection(item) {
  setItemSelected(item)
}

<div
  onClick={() => setItemSelected('1')}
  className={`itemSelected == 1 ? 'selected' : ''`}>
  1
</div>
<div
  onClick={() => setItemSelected('2')}
  className={`itemSelected == 2 ? 'selected' : ''`}>
  2
</div>
<div
  onClick={() => setItemSelected('3')}
  className={`itemSelected == 3 ? 'selected' : ''`}>
  3
</div>

const[itemSelected，setItemSelected]=useState（'1'）；
函数更新选择（项）{
setItemSelected（项目）
}
setItemSelected（'1'）}
className={'itemSelected==1？'selected'：''`}>
1.
setItemSelected（'2'）}
className={'itemSelected==2？'selected'：''`}>
2.
setItemSelected（'3'）}
className={'itemSelected==3？'selected'：''`}>
3.
一种常见模式是存储状态，该状态可以表示是否选择了某个项目。您还可以在state中存储类名

const [itemSelected, setItemSelected] = useState('1');

function updateSelection(item) {
  setItemSelected(item)
}

<div
  onClick={() => setItemSelected('1')}
  className={`itemSelected == 1 ? 'selected' : ''`}>
  1
</div>
<div
  onClick={() => setItemSelected('2')}
  className={`itemSelected == 2 ? 'selected' : ''`}>
  2
</div>
<div
  onClick={() => setItemSelected('3')}
  className={`itemSelected == 3 ? 'selected' : ''`}>
  3
</div>

const[itemSelected，setItemSelected]=useState（'1'）；
函数更新选择（项）{
setItemSelected（项目）
}
setItemSelected（'1'）}
className={'itemSelected==1？'selected'：''`}>
1.
setItemSelected（'2'）}
className={'itemSelected==2？'selected'：''`}>
2.
setItemSelected（'3'）}
className={'itemSelected==3？'selected'：''`}>
3.
在您发布的代码中，您希望将类添加到哪个元素，以及从哪个元素中删除它？我想添加到我单击（1,2,3,4）并从所有其他SOK中删除的元素中，如果您将Menu.ItemGroup组件的代码添加到您的问题中，我可以为您提供一种实现方法。在您发布的代码中，您希望将类添加到哪个元素，以及您希望将其从哪个元素中删除？我希望添加到我单击（1,2,3,4）的元素，然后从所有其他SOK中删除，如果您在问题中添加Menu.ItemGroup组件的代码，我可以为您提供一种实现方法。