如何獲取反應表中單擊單元格的行索引？

Question

您好，我正在使用 React Table。 這是我的演示沙盒 - https://codesandbox.io/embed/vq60okkz20?codemirror=1

我想獲取單擊的單元格 div 的行索引。 我有兩列，其中的單元格有一個可點擊的 div。 我想獲取這些單元格的行索引

Answer 1

直接來自 React-table 文檔：

// When any Td element is clicked, we'll log out some information
<ReactTable
  getTdProps={(state, rowInfo, column, instance) => {
    return {
      onClick: (e, handleOriginal) => {
        console.log("A Td Element was clicked!");
        console.log("It was in this row:", rowInfo);

        // IMPORTANT! React-Table uses onClick internally to trigger
        // events like expanding SubComponents and pivots.
        // By default a custom 'onClick' handler will override this functionality.
        // If you want to fire the original onClick handler, call the
        // 'handleOriginal' function.
        if (handleOriginal) {
          handleOriginal();
        }
      }
    };
  }}
/>  

rowInfo對象將具有以下形狀：

  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

通過訪問rowInfo.index ，您將獲得單元格的行索引。
工作示例： https ://codesandbox.io/s/nr8w9q6z2m

Answer 2

我會建議使用 onClick 處理程序來獲取價值。 您可以添加一個唯一的 ID 以獲取確切的元素。

這是一個非常簡單的示例

<div onClick={this.onClickHandler}></div>


 onClickHandler = (event) =>{
 Let id =event.target.id
... 
//perform operations
 }

id 可以隨機生成

Answer 3

如果您正在進行功能渲染，這可能會有所幫助

<tbody {...getTableBodyProps()}>
    rows.slice(0, 10).map((row, i) => {
      prepareRow(row);
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map((cell, i) => {
            return (
              <td {...row.getRowProps({onClick: (e)=>handleTableCellClick(e,row)})}>{cell.render("Cell")}</td>
            );
          })}
        </tr>
      );
    })
</tbody>