React bootstrap onclick list-group-item выделить элемент / активный

У меня есть 2 панели с группой списков на каждой панели. Я использую бутстрап.

Проблема: при нажатии первого элемента-группы-списка на панели 1 изменяется style = "success", но когда я нажимаю на второй элемент-группа-список на панели 1, стиль меняется на "успешно", но не изменяется первый список -group-item стиль по умолчанию (style = "").

onclick на list-group-item он должен изменить стиль или активировать или изменить цвет фона. Выделите выбранный элемент и удалите его, щелкнув другой элемент на соответствующей панели.
Альтернатива <ListGroupItem href="#" active>

мой код: Код


reactjs javascript react-bootstrap
person contact dummy    schedule 04.09.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

В onSelectDevice функции ваша установка card.style = "success"; для обеих кнопок A и B.

Но вы не сбрасываете старый стиль на пустой при нажатии на B.

либо вы можете сделать как решение @Guillermo Quiros, либо вы можете снова установитьState this.state.cards, как показано ниже:

let showPropContainer = this.state.cards.slice() or [...this.state.cards];
let cards = showPropContainer.map((val, index) => {
    val.esn === card.esn ? val.style="success" : val.style=""
    return val;
});
this.setState({ selectedCard: card , cards})

Полное решение доступно здесь

person Jayavel    schedule 04.09.2018
comment
Спасибо, но я нашел Гильермо Кирос немного проще. Я просмотрю ваш код и пойму. - person contact dummy; 04.09.2018

arrow_upward
1
arrow_downward

Однажды у меня была такая же проблема, и вот как я ее решил

      <ListGroupItem
        key={note.id}
        onClick={(id) => handleItemClick(note.id)}
// here on the href attribute I appended an Id just to make it somehow different and it worked for me. 

        href={`#${note.id}`} >

        <h6>{note.title}</h6>
      </ListGroupItem>
person M.Floribert    schedule 13.12.2019