我正在尝试找到适合我的 React 应用程序使用的最佳表格,目前,react-table提供了我需要的一切(分页、服务器端控制、过滤、排序、页脚行)。
话虽如此,我似乎无法选择一行。没有示例显示这一点。
我尝试过的一些方法包括尝试在单击行时设置 className。但我似乎无法在enor中找到调用元素t。另外,我不喜欢这种方法,因为这不是 React 应用程序应该做的事情。
e
t
<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”
经过几次尝试,我找到了解决方案,希望这能对你有所帮助。将以下内容添加到你的<ReactTable>组件中:
<ReactTable>
getTrProps={(state, rowInfo) => { if (rowInfo && rowInfo.row) { return { onClick: (e) => { this.setState({ selected: rowInfo.index }) }, style: { background: rowInfo.index === this.state.selected ? '#00afec' : 'white', color: rowInfo.index === this.state.selected ? 'white' : 'black' } } }else{ return {} } }
不要state忘记添加一个空selected值,例如:
state
selected
state = { selected: null }