Question

我在同一页面上有两个具有不同数据的表。我可以选择让用户在两个表中选择多个行。我遇到的问题是，如果他们选择一个表中的任何行，它将选择另一表中的同一行。我该如何选择它以仅对所选表进行样式设置？

这是第一张桌子的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 {}
        }
    }}
/>

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

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

有什么方法可以指定更多内容，例如仅设置此行所属的特定表的样式，而不是所有表的行索引？

谢谢。

Answer 1

它们被映射到其容器组件的相同状态。您可能为数据传递了不同的状态变量，但是两个React表的selected状态变量是相同的，因此在箭头函数中绑定上下文后，它使用的是相同的父状态变量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，而不只是它所在的行。 Idk如果您甚至需要多个选择数组，可能不需要，但仍然很可能拥有它们。

突出显示一个反应表中的行将页面中第二个反应表中的同一行突出显示

2 个答案: