删除 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 这与 header delete span link.The 代码片段相关，显示了使用 hyperlink 渲染删除标签。

在这里，一旦用户点击删除 link 我如何才能获得该特定行的 ID。 ID 已分配给 json 数据中的所有行。那么，如何在onClick函数中传递cellInfo或rowInfo。

Answer 1

如果查看 docs（特别是在 'Renderers' 下），单元格接收的行对象格式如下：

{
  // 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 中，以便 table 组件可以根据您的编辑进行更新。假设在您的状态下，您将数据集保存为 data，并使用它来填充 table，您可以在 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 是你想要使用的您的具体情况

Answer 2

如果您像我一样使用 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 中依赖项数组的一部分。

删除 React Table 中的特定项目？

Delete particular item in React Table?

reactjs

react-redux

react-table