Как получить индекс строки по нажатой ячейке в реагирующей таблице? - PullRequest
Новая
       36

Как получить индекс строки по нажатой ячейке в реагирующей таблице?

0 голосов
/ 27 декабря 2018

Здравствуйте, я работаю с React Table.Вот моя демонстрационная песочница - https://codesandbox.io/embed/vq60okkz20?codemirror=1

Я хочу получить индекс строки по нажатым ячейкам div.У меня есть два столбца, где ячейки имеют кликабельный div.Я хочу получить индекс строки для этих ячеек

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Если бы я предложил использовать обработчик onClick, чтобы получить значение.Вы можете объявить уникальный идентификатор, чтобы получить точный элемент.

Вот очень простой пример 

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


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

Идентификатор может быть сгенерирован случайным образом

0 голосов
/ 27 декабря 2018

Прямо из документов React-таблицы: 

// 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

...