Reaction Bootstrap onClick List-Group-Item突出显示项目/Active

编程基础网前端问题

2022-01-01

React bootstrap onclick list-group-item highlight the item/ active(Reaction Bootstrap onClick List-Group-Item突出显示项目/Active)

本文介绍了Reaction Bootstrap onClick List-Group-Item突出显示项目/Active的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

问题： 单击面板1上的第一个List-Group-Item将更改style = "success"，但当我单击面板1上的第二个List-Group-Item时，样式将更改为"Success"，但不会将第一个List-Group-Item样式更改为Default(style = "")。

单击List-Group-Item应更改样式或活动或更改背景颜色。高亮显示所选项目，并在单击相应面板上的其他项目时将其删除。
替代方案

<ListGroupItem href="#" active>

我的代码：Code

推荐答案

OnonSelectDevice将您的设置card.style = "success";同时用于按钮A和B。

但您没有在单击B时将旧样式重置为空。

您可以选择@Guillermo Quiros解决方案，也可以重新设置状态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

这篇关于Reaction Bootstrap onClick List-Group-Item突出显示项目/Active的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！