Добавьте className onClick, удаляя другой класс с тем же именем из братьев и сестер - PullRequest
Новая
       12

Добавьте className onClick, удаляя другой класс с тем же именем из братьев и сестер

0 голосов
/ 19 сентября 2019

Мне нужно добавить имя класса при нажатии при удалении других классов с таким же именем класса из братьев и сестер.Допустим, у меня есть 

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.Поэтому, пожалуйста, помогите и спасибо.

Ответы [ 2 ]

2 голосов
/ 19 сентября 2019

Здесь я создал рабочую демонстрацию для васhttps://stackblitz.com/edit/react-ertozp

Вы можете управлять им с помощью переменной state.Вы должны обработать событие click тега 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>
    )
}
0 голосов
/ 19 сентября 2019 
const menuitems = list.map((list, index) => {
    return <li className=`menuitem ${someCheckHere && 'active'}` key={index}>{list}</li>
})
...