Javascript 突出显示一个react表中的行就是突出显示页面上第二个表中的同一行

我在同一页上有两个react表，数据不同。我可以让用户选择两个表中的多行。我遇到的问题是，如果他们在一个表中选择任何一行，它就会在另一个表中选择同一行。如何使其仅为选定的表设置样式

下面是第一个表的

gettrops

{
if（rowInfo&&rowInfo.row）{
返回{
onClick：（e）=>{
if（this.state.selectedapp.indexOf（rowInfo.index）>=0）{
var selectedapp=this.state.selectedapp；
SelectedApp.splice（SelectedApp.indexOf（rowInfo.index），1）；
this.setState（{selectedOpp:selectedOpp}）；
}否则{
var selectedApp=this.state.selected；
选择App.push（行信息索引）；
this.setState（{selectedOpp:selectedOpp}）；
}
},
风格：{
背景：this.state.selectedApp.indexOf（rowInfo.index）>=0？“#00afec”：“white”，
颜色：this.state.selectedapp.indexOf（rowInfo.index）>=0？'white'：'black'
}
}
}否则{
返回{}
}
}}
/>

它们被映射到其容器组件的相同状态。您可能会为数据传递不同的状态变量，但所选的

状态变量对于两个React表是相同的，因此在箭头函数中绑定上下文时，它使用相同的父状态变量
所选的

尝试为两个React表选择不同的
数组

另外，减少代码冗余

<ReactTable
    key="table1"
    data={this.state.table2state}
    columns={columnNames}
    showPagination={false}
    minRows={0}
    getTrProps={(state, rowInfo) => { 
    const selected = this.state.selectedTable1;
        if (rowInfo && rowInfo.row) {
            return {
                onClick: (e) => {
                    if (this.state.selectedTable1.indexOf(rowInfo.index) >= 0) {
                        selected.splice(selected.indexOf(rowInfo.index), 1);
                    } else {
                        selected.push(rowInfo.index);
                    }
                    this.setState({ selectedTable1: selected });
                },
                style: {
                    background: this.state.selectedTable1.indexOf(rowInfo.index) >= 0 ? '#00afec' : 'white',
                    color: this.state.selectedTable1.indexOf(rowInfo.index) >= 0 ? 'white' : 'black'
                }
            }
        } else {
            return {}
        }
    }
}
/>

{
const selected=this.state.selectedTable1；
if（rowInfo&&rowInfo.row）{
返回{
onClick：（e）=>{
if（this.state.selectedTable1.indexOf（rowInfo.index）>=0）{
selected.splice（selected.indexOf（rowInfo.index），1）；
}否则{
选中。推送（行信息索引）；
}
this.setState（{selectedTable1:selected}）；
},
风格：{
背景：this.state.selectedTable1.indexOf（rowInfo.index）>=0？“#00afec”：白色，
颜色：this.state.selectedTable1.indexOf（rowInfo.index）>=0？'white'：'black'
}
}
}否则{
返回{}
}
}
}
/>
最后通过不使用行索引（rowInfo.index）解决了这个问题。由于索引是在表之间共享的，因此似乎突出显示了这两个索引。因此，我使用了行数据的_id，如下所示：


{
if（rowInfo&&rowInfo.row）{
返回{
onClick：（e）=>{
if（this.state.selected.indexOf（rowInfo.original.\u id）>=0）{
所选变量=this.state.selected；
selected.splice（selected.indexOf（rowInfo.original.\u id），1）；
this.setState（{selected:selected}）；
}否则{
所选变量=this.state.selected；
选中。推送（rowInfo.original.\u id）；
this.setState（{selected:selected}）；
}
},
风格：{
背景：this.state.selected.indexOf（rowInfo.original.u id）>=0？“#00afec”：“white”，
颜色：this.state.selected.indexOf（rowInfo.original.\u id）>=0？'white'：'black'
}
}
}否则{
返回{}
}
}}
/>
是否将两个表映射到相同的状态？@AakashVerma是否喜欢相同的数据状态？两者都填充了来自不同州的数据。或者你是什么意思？哦，好吧，这就是我想知道的，是否两个表都指向相同的状态变量。你能给我看看这两个表的父表吗？我相信是同一个表组件传递了不同的道具。我不知道你是怎么称呼GettrOps的。嘿，谢谢你的回复。我目前确实有两种不同状态的背景和颜色，但这似乎无关紧要。出于某种原因，我得到了
this.state.selected.indexOf（rowInfo.original.u id）
作为
-1
（索引不存在）