React bootstrap onclick list-group-item 突出显示项目/活动答案

【问题标题】：React bootstrap onclick list-group-item highlight the item/ activeReact bootstrap onclick list-group-item 突出显示项目/活动
【发布时间】：2019-02-09 02:53:21
【问题描述】：

我有 2 个面板，每个面板上都有列表组。我正在使用引导程序。

问题： onclick 面板 1 上的第一个列表组项它会更改 style = "success"，但是当我单击面板 1 上的第二个列表组项样式更改为“成功”但不将第一个列表组项样式更改为默认值(style = "")。

点击 list-group-item 它应该改变样式或激活或改变背景颜色。当单击相应面板上的另一个项目时，突出显示所选项目并将其删除。
替代<ListGroupItem href="#" active>

我的代码：Code

【问题讨论】：

标签： javascript reactjs react-bootstrap

【解决方案1】：

在 onSelectDevice 上，将您的设置 card.style = "success"; 用于按钮 A 和 B。

但是当你点击 B 时，你没有将旧样式重置为空。

您可以像@Guillermo Quiros 解决方案那样做，或者您可以再次 setState 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})

提供完整解决方案here

【讨论】：

谢谢，但我发现 Guillermo Quiros 有点简单。我会通过你的代码并理解。

【解决方案2】：

我曾经遇到过同样的问题，我是这样解决的

      <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>

【讨论】：