Question

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

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

在列表组项目上单击，应更改样式或激活或更改背景颜色。突出显示所选项目，然后在相应面板上单击其他项目时将其删除。
备用<ListGroupItem href="#" active>

我的代码：Code

Answer 1

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

但是当您单击B时，您不会将旧样式重置为空。

您可以像@Guillermo Quiros解决方案一样进行操作，也可以再次this.state.cards进行setState，如下所示：

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

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

React bootstrap onclick list-group-item高亮显示项目/有效

2 个答案: