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

如果您检出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是您要用于特定情况的内容

删除React表中的特定项目？

2 个答案: