在一个反应中突出显示行 table 在页面上的第二个反应中突出显示同一行

Question

我在同一页面上有两个具有不同数据的反应 table。我可以让用户在两个 table 中选择 select 多行。我遇到的问题是，如果他们 select 一个 table 中的任何一行，它 select 另一个 table 中的同一行。我如何在 select 上做到这一点，它只会为 select 编辑的 table 设置样式？

这是第一个 table 的 getTrProps。

<ReactTable
    data={this.state.table1state}
    columns={columnNames}
    showPagination={false}
    minRows={0}
    getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
            return {
                onClick: (e) => {
                    if (this.state.selectedOpp.indexOf(rowInfo.index) >= 0) {
                        var selectedOpp = this.state.selectedOpp;
                        selectedOpp.splice(selectedOpp.indexOf(rowInfo.index), 1);
                        this.setState({ selectedOpp: selectedOpp });
                    } else {
                        var selectedOpp = this.state.selected;
                        selectedOpp.push(rowInfo.index);
                        this.setState({ selectedOpp: selectedOpp });
                    }

                },
                style: {
                    background: this.state.selectedOpp.indexOf(rowInfo.index) >= 0 ? '#00afec' : 'white',
                    color: this.state.selectedOpp.indexOf(rowInfo.index) >= 0 ? 'white' : 'black'
                }
            }
        } else {
            return {}
        }
    }}
/>

这是第二个。完全一样，只是我使用不同的状态来存储 selected 行，这并不能解决问题。

<ReactTable
    data={this.state.table2state}
    columns={columnNames}
    showPagination={false}
    minRows={0}
    getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
            return {
                onClick: (e) => {
                    if (this.state.selected.indexOf(rowInfo.index) >= 0) {
                        var selected = this.state.selected;
                        selected.splice(selected.indexOf(rowInfo.index), 1);
                        this.setState({ selected: selected });
                    } else {
                        var selected = this.state.selected;
                        selected.push(rowInfo.index);
                        this.setState({ selected: selected });
                    }

                },
                style: {
                    background: this.state.selected.indexOf(rowInfo.index) >= 0 ? '#00afec' : 'white',
                    color: this.state.selected.indexOf(rowInfo.index) >= 0 ? 'white' : 'black'
                }
            }
        } else {
            return {}
        }
    }}
/>

有什么方法可以指定更多，比如只为这个特定的 table 设置样式，该行是其中的一部分，而不是所有 table 的行索引？

谢谢。

Answer 1

它们映射到其容器组件的相同状态。您可能会为数据传递不同的状态变量，但 selected 状态变量对于两个 React 表是相同的，因此在箭头函数中绑定上下文时，它使用相同的父状态变量 selected。

尝试为两个 React 表使用不同的 selected 数组。

此外，减少代码冗余

<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 {}
        }
    }
}
/>

Answer 2

最终通过不使用行索引解决了这个问题 (rowInfo.index)。由于索引在表之间共享，因此似乎同时突出了两者。因此，我改为使用行数据的 _id，如下所示：

<ReactTable
    data={this.state.table2state}
    columns={columnNames}
    showPagination={false}
    minRows={0}
    getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
            return {
                onClick: (e) => {
                    if (this.state.selected.indexOf(rowInfo.original._id) >= 0) {
                        var selected = this.state.selected;
                        selected.splice(selected.indexOf(rowInfo.original._id), 1);
                        this.setState({ selected: selected });
                    } else {
                        var selected = this.state.selected;
                        selected.push(rowInfo.original._id);
                        this.setState({ selected: selected });
                    }

                },
                style: {
                    background: this.state.selected.indexOf(rowInfo.original._id) >= 0 ? '#00afec' : 'white',
                    color: this.state.selected.indexOf(rowInfo.original._id) >= 0 ? 'white' : 'black'
                }
            }
        } else {
            return {}
        }
    }}
/>

这样每个选择数组都有行中数据的 ID，而不仅仅是它是哪一行。如果你甚至需要多个选择数组，可能不需要，但仍然有可能很好。

在一个反应中突出显示行 table 在页面上的第二个反应中突出显示同一行

Highlight row in one react table is highlighting the same row in a second one on the page

javascript

reactjs

react-table

在一个反应​​中突出显示行 table 在页面上的第二个反应中突出显示同一行

Highlight row in one react table is highlighting the same row in a second one on the page

javascript

reactjs

react-table

在一个反应中突出显示行 table 在页面上的第二个反应中突出显示同一行