选择click react-table上的行
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择click react-table上的行相关的知识,希望对你有一定的参考价值。
我试图找到与我的反应应用程序一起使用的最佳表格,而现在,react-table提供了我需要的一切(分页,服务器端控制,过滤,排序,页脚行)。
话虽如此,我似乎无法选择一行。没有examples表明这一点。
我尝试过的一些事情包括尝试在点击行时设置className。但我似乎无法在e
和t
找到调用元素。此外,我不喜欢这种方法,因为反应应用程序不应该如何做事。
<ReactTable
...
getTrProps={(state, rowInfo, column, instance) => {
return {
onClick: (e, t) => {
t.srcElement.classList.add('active')
},
style: {
}
}
}}
/>
一些可能的解决方法是将复选框渲染为第一列,但这不是最佳选择,因为它限制了单击以“激活”该行的区域。此外,视觉反馈将不那么富有表现力。
我在房间里想念大象吗?如果没有,你知道另一个支持我之前描述过的东西的图书馆吗?
谢谢!
编辑:另一种选择,这是开源,是建议编辑。也许这是正确的事情。
编辑2
另一件事,由DavorinRuš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>
组件中:
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
中不要忘记添加一个null selected
值,如:
state = { selected: null }
React-Table中包含一个允许选择的HOC,即使在对表进行过滤和分页时,设置也比基本表略高一些,因此请首先阅读下面链接中的信息。
导入HOC后,您可以使用必要的方法使用它:
/**
* Toggle a single checkbox for select table
*/
toggleSelection(key: number, shift: string, row: string) {
// start off with the existing state
let selection = [...this.state.selection];
const keyIndex = selection.indexOf(key);
// check to see if the key exists
if (keyIndex >= 0) {
// it does exist so we will remove it using destructing
selection = [
...selection.slice(0, keyIndex),
...selection.slice(keyIndex + 1)
];
} else {
// it does not exist so add it
selection.push(key);
}
// update the state
this.setState({ selection });
}
/**
* Toggle all checkboxes for select table
*/
toggleAll() {
const selectAll = !this.state.selectAll;
const selection = [];
if (selectAll) {
// we need to get at the internals of ReactTable
const wrappedInstance = this.checkboxTable.getWrappedInstance();
// the 'sortedData' property contains the currently accessible records based on the filter and sort
const currentRecords = wrappedInstance.getResolvedState().sortedData;
// we just push all the IDs onto the selection array
currentRecords.forEach(item => {
selection.push(item._original._id);
});
}
this.setState({ selectAll, selection });
}
/**
* Whether or not a row is selected for select table
*/
isSelected(key: number) {
return this.state.selection.includes(key);
}
<CheckboxTable
ref={r => (this.checkboxTable = r)}
toggleSelection={this.toggleSelection}
selectAll={this.state.selectAll}
toggleAll={this.toggleAll}
selectType="checkbox"
isSelected={this.isSelected}
data={data}
columns={columns}
/>
浏览此处获取更多信息: https://github.com/tannerlinsley/react-table/tree/v6#selecttable
这是一个工作示例: https://codesandbox.io/s/react-table-select-j9jvw
我不熟悉,react-table,所以我不知道它有直接支持选择和取消选择(如果有的话会很好)。
如果没有,使用您已经拥有的代码片段就可以安装onCLick处理程序。现在,您可以修改状态,而不是尝试将样式直接附加到行,例如将selected:true添加到行数据。这将引发重新投降。现在,您只需覆盖选定的=== true呈现的行的方式。沿线的东西:
// Any Tr element will be green if its (row.age > 20)
<ReactTable
getTrProps={(state, rowInfo, column) => {
return {
style: {
background: rowInfo.row.selected ? 'green' : 'red'
}
}
}}
/>
如果你想在选择行上有多个选择..
import React from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
import { ReactTableDefaults } from 'react-table';
import matchSorter from 'match-sorter';
class ThreatReportTable extends React.Component{
constructor(props){
super(props);
this.state = {
selected: [],
row: []
}
}
render(){
const columns = this.props.label;
const data = this.props.data;
Object.assign(ReactTableDefaults, {
defaultPageSize: 10,
pageText: false,
previousText: '<',
nextText: '>',
showPageJump: false,
showPagination: true,
defaultSortMethod: (a, b, desc) => {
return b - a;
},
})
return(
<ReactTable className='threatReportTable'
data= {data}
columns={columns}
getTrProps={(state, rowInfo, column) => {
return {
onClick: (e) => {
var a = this.state.selected.indexOf(rowInfo.index);
if (a == -1) {
// this.setState({selected: array.concat(this.state.selected, [rowInfo.index])});
this.setState({selected: [...this.state.selected, rowInfo.index]});
// Pass props to the React component
}
var array = this.state.selected;
if(a != -1){
array.splice(a, 1);
this.setState({selected: array});
}
},
// #393740 - Lighter, selected row
// #302f36 - Darker, not selected row
style: {background: this.state.selected.indexOf(rowInfo.index) != -1 ? '#393740': '#302f36'},
}
}}
noDataText = "No available threats"
/>
)
}
}
export default ThreatReportTable;
动态样式的另一种机制是在JSX中为您的组件定义它。例如,以下内容可用于在React tic-tac-toe教程中选择性地设置当前步骤的样式(建议的额外信用增强之一:
return (
<li key={move}>
<button style={{fontWeight:(move === this.state.stepNumber ? 'bold' : '')}} onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
当然,更简洁的方法是添加/删除“选定的”CSS类,但这种直接方法在某些情况下可能会有所帮助。
您选择的答案是正确的,但是如果您使用排序表,它会崩溃,因为在搜索时rowInfo将变为未定义,建议使用此函数代替
getTrGroupProps={(state, rowInfo, column, instance) => {
if (rowInfo !== undefined) {
return {
onClick: (e, handleOriginal) => {
console.log('It was in this row:', rowInfo)
this.setState({
firstNameState: rowInfo.row.firstName,
lastNameState: rowInfo.row.lastName,
selectedIndex: rowInfo.original.id
})
},
style: {
cursor: 'pointer',
background: rowInfo.original.id === this.state.selectedIndex ? '#00afec' : 'white',
color: rowInfo.original.id === this.state.selectedIndex ? 'white' : 'black'
}
}
}}
}
以上是关于选择click react-table上的行的主要内容,如果未能解决你的问题,请参考以下文章
React-Table:如果用鼠标单击(选择)行,如何更改行的背景颜色?