删除 React 表中的特定项目？

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

如果您像我一样正在使用 React-Table v7 并且您也在组件中使用基于钩子的方法，您将希望这样做。

const [data, setData] = useState([]);
const columns = React.useMemo(
      () => [
        {
          Header: 'Header1',
          accessor: 'Header1Accessor',
        },
        {
          Header: 'Header2',
          accessor: 'Header2Accessor',
        },
        {
          Header: 'Delete',
          id: 'delete',
          accessor: (str) => 'delete',

      Cell: (tableProps) => (
        <span style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}
          onClick={() => {
            // ES6 Syntax use the rvalue if your data is an array.
            const dataCopy = [...data];
            // It should not matter what you name tableProps. It made the most sense to me.
            dataCopy.splice(tableProps.row.index, 1);
            setData(dataCopy);
          }}>
         Delete
        </span>
      ),
    },
  ],
  [data],
  );
// Name of your table component
<ReactTable
  data={data}
  columns={columns}
/>

重要的是，当您定义列时，请确保父组件状态中的数据是 React.useMemo 中依赖项数组的一部分。

Answer 2

如果您查看文档（特别是在“渲染器”下），单元格接收的行对象采用以下格式：

{
  // 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是您想要用于特定情况的内容