Header: "Delete",
id:'delete',
accessor: str => "delete",
Cell: (row)=> (
<span onClick={(row) => this.onRemoveHandler(row,props)} style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}>
Delete
</span>
)
React Table
这与标题删除跨度链接有关。代码片段显示了使用超链接呈现删除标签。
在这里,一旦用户单击删除链接,我如何获取该特定行的 ID。
ID 已经从 json 数据分配给所有行。
那么,如何在 onClick 函数中传递 cellInfo 或 rowInfo 。
最佳答案
如果您查看 docs (特别是在“渲染器”下),单元格接收的行对象采用以下格式:
{
// Row-level props
row: Object, // the materialized row of data
original: , // the original row of data
index: '', // the index of the row in the original array
viewIndex: '', // the index of the row relative to the current view
level: '', // the nesting level of this row
nestingPath: '', // the nesting path of this row
aggregated: '', // true if this row's values were aggregated
groupedByPivot: '', // true if this row was produced by a pivot
subRows: '', // any sub rows defined by the `subRowKey` prop
// Cells-level props
isExpanded: '', // true if this row is expanded
value: '', // the materialized value of this cell
resized: '', // the resize information for this cell's column
show: '', // true if the column is visible
width: '', // the resolved width of this cell
maxWidth: '', // the resolved maxWidth of this cell
tdProps: '', // the resolved tdProps from `getTdProps` for this cell
columnProps: '', // the resolved column props from 'getProps' for this cell's column
classes: '', // the resolved array of classes for this cell
styles: '' // the resolved styles for this cell
}
根据输入数据的样子,您可以使用此信息从数据集中删除。如果您计划动态编辑数据,则应将其存储在
state
中。 ,以便表格组件可以根据您的编辑进行更新。假设在您所在的州,您将数据集保存为 data
,并使用它来填充表格,您可以更改 onclick 函数中的状态:Header: "Delete",
id:'delete',
accessor: str => "delete",
Cell: (row)=> (
<span onClick={() => {
let data = this.state.data;
console.log(this.state.data[row.index]);
data.splice(row.index, 1)
this.setState({data})
}}>
Delete
</span>
)
所以你的应用程序的粗略近似是这样的:
this.state = {
data: <your data set>
}
<ReactTable
data={this.state.data}
columns={[
<other columns you have>,
{
Header: "Delete",
id:'delete',
accessor: str => "delete",
Cell: (row)=> (
<span style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}
onClick={() => {
let data = this.state.data;
console.log(this.state.data[row.index]);
data.splice(row.index, 1)
this.setState({data})
}}>
Delete
</span>
)}
]}
/>
当然,您不需要将该行记录到控制台,它不需要在那里。这也是处理它的最快和最简单的方法,您可以改用
row
对象获取您想要的任何特定元素(id、名称等)并使用它从数据集中删除一个重要的注意事项:
viewIndex
有很大区别和 index
, index
是您要用于特定情况的
关于reactjs - 删除 React Table 中的特定项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53030706/