添加一个className onClick，同时从兄弟姐妹中删除具有相同名称的其他类答案

【问题标题】：Add a className onClick while removing other class with the same name from siblings添加一个className onClick，同时从兄弟姐妹中删除具有相同名称的其他类
【发布时间】：2020-01-20 06:40:23
【问题描述】：

我需要在单击时添加一个类名，同时从兄弟姐妹中删除具有相同类名的其他类。假设我有

function Menu(props) {
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return <li className="menuitem" key={index}>{list}</li>
    })

    return (
        <ul>{menuitems}</ul>
    )
}

在 DOM 中，它应该如下所示：

<ul>
    <list class="menuitem">list1</li>
    <list class="menuitem active">list2</li>
    <list class="menuitem">list3</li>
</ul>

我仍处于熟悉 ReactJS 的状态。所以请帮忙，谢谢。

【问题讨论】：

标签： javascript reactjs onclick classname

【解决方案1】：

const menuitems = list.map((list, index) => {
    return <li className=`menuitem ${someCheckHere && 'active'}` key={index}>{list}</li>
})

【讨论】：

【解决方案2】：

我在这里为您创建了工作演示
https://stackblitz.com/edit/react-ertozp

您可以使用state 变量来管理它。您必须处理li 标签的点击事件，并在点击它时设置index。

import React, { useState } from 'react';

...
...

function App(props) {
    const [active, setActive] = useState(1)
    const list = ['list1', 'list2', 'list3']
    const menuitems = list.map((list, index) => {
        return <li className={`menuitem${active === index ? ' active' :''}`} key={index} onClick={()=>setActive(index)}>{list}</li>
    })

    return (
        <ul>{menuitems}</ul>
    )
}

【讨论】：