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

Question

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

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 的状态。所以请帮忙，谢谢。

Answer 1

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

Answer 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>
    )
}

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

Add a className onClick while removing other class with the same name from siblings

javascript

onclick

classname

reactjs