Удалить конкретный элемент в 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>
)

Таблица реагирования Это связано со ссылкой на диапазон удаления заголовка. Фрагменты кода показывают визуализацию метки удаления с гиперссылкой.

Здесь, когда пользователь нажимает ссылку удалениякак я могу получить идентификатор этой конкретной строки.Идентификатор уже был назначен для всей строки из данных JSON.Итак, как передать cellInfo или rowInfo внутри функции onClick.

Answer 1

Если вы извлекаете документы (в частности, в разделе «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, чтобы компонент таблицы мог обновляться в соответствии с вашими изменениями.Предполагая, что в вашем состоянии вы сохраняете свой набор данных как 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, чтобы получить любой конкретный элемент (идентификатор, имя и т. Д.) И использовать его для удаления из набора данных

* 1016.* Важное замечание: Существует большая разница между viewIndex и index, index - это то, что вы хотите использовать для вашего конкретного случая