reactjs - 删除 React Table 中的特定项目？

Question

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 。

Answer 1

如果您查看 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是您要用于特定情况的