React-Table получает данные определенной строки и устанавливает в состояние - PullRequest
Новая
       6

React-Table получает данные определенной строки и устанавливает в состояние

0 голосов
/ 12 февраля 2019

Я новичок в React.Я использовал таблицу реакции, чтобы показать данные, которые у меня есть.Теперь мне нужно взять некоторые конкретные данные из моей таблицы и установить их в состояние, например, имя из последней строки, которая у меня есть.Как я мог это сделать?Я хочу, чтобы данные последней строки выполнялись при разбивке на страницы, то есть на всех страницах.Мой стол как показано ниже 

<ReactTable
  columns={columns}
  data={this.state.users}
  defaultPageSize={3}
  className="-striped -highlight"
  sortable={false}
  resizable={false}
  style={{
    textAlign: "center"
  }}
/>

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

Вы можете взаимодействовать со строкой, используя предварительно заданные команды, используя getTdProps или getTrProps при создании своей реактивной таблицы 

<ReactTable
  columns={columns}
  data={this.state.users}
  defaultPageSize={3}
  className="-striped -highlight"
  sortable={false}
  resizable={false}
  style={{
    textAlign: "center"
  }}
  getTdProps={(state, rowInfo, column, instance) => {
      // rowInfo contains a lot of information about the row (including index on both the
      // page and it's index within the data set), the rowInfo.original objet contains 
      // values in the cells of the row clicked.
      return {
        // You can define an onClick function here that will apply to all rows
        onClick: (e, handleOriginal) => {
           const rowData = rowInfo.original
           // You can interact with the row data here, to use it however you want
           this.setState({userName: rowData.userName, userEmail: rowData.userEmail})
        }
  }};
/>

Эта функция специально устанавливает userName и userEmail для вашегосостояние (при условии, что это значения, которые у вас есть в таблице)

Вот отличная песочница, настроенная для игры с этой функцией , а документы таблицы реакции здесь

0 голосов
/ 12 февраля 2019

Вы можете попытаться извлечь его из массива this.state.users.в зависимости от размера вашей страницы вы можете запустить фильтр типа 

lastRows = this.state.users.filter((user, index) => ((index-1) % page_size) === 0)

, учитывая page_size в качестве числа или строк на странице.Кажется, вы установили его как 3.

PS: Если вы хотите получить доступ к текущему page_size, вы можете сделать его частью состояния вашего родительского компонента, а затем дать таблицу реакцииразмер страницы с использованием pageSize prop.

...