我正在尝试找到适合我的 React 应用程序使用的最佳表格，目前，react-table提供了我需要的一切（分页、服务器端控制、过滤、排序、页脚行）。

话虽如此，我似乎无法选择一行。没有示例显示这一点。

我尝试过的一些方法包括尝试在单击行时设置 className。但我似乎无法在enor中找到调用元素t。另外，我不喜欢这种方法，因为这不是 React 应用程序应该做的事情。

<ReactTable
            ...
            getTrProps={(state, rowInfo, column, instance) => {
                return {
                    onClick: (e, t) => {
                        t.srcElement.classList.add('active')
                    },
                    style: {
                    }
                }
            }}
        />

一些可能的解决方法是将复选框渲染为第一列，但这不是最佳选择，因为它限制了单击以“激活”行的区域。此外，视觉反馈的表现力也会降低。

我是不是忽略了最重要的问题？如果没有，你知道其他支持我之前描述的内容的库吗？

谢谢你！

编辑： 另一个选择是，这是开源的，建议进行编辑。也许这是正确的做法。

编辑2

Davorin Ruševljan 在评论中建议的另一件事，但我无法让它发挥作用：

onRowClick(e, t, rowInfo) {
    this.setState((oldState) => {
        let data = oldState.data.slice();
        let copy = Object.assign({},  data[rowInfo.index]);

        copy.selected = true;
        copy.FirstName = "selected";
        data[rowInfo.index] = copy;

        return {
            data: data,
        }
    })
}

....

            getTrProps={(state, rowInfo, column) => {
                return {
                    onClick: (e, t) => { this.onRowClick(e, t, rowInfo) },
                    style: {
                        background: rowInfo && rowInfo.row.selected ? 'green' : 'red'
                    }
                }
            }}

这会将“FirstName”列设置为“selected”，但不会将类设置为“green”