如何在反应中获取当前页码onPagechange函数

Question

我试图在点击下一步时获取当前页码 table 但看不到当前页码。

<div className="article_full">
<h2>DETAILS</h2>
<ReactTable filterable columns= . 
{this.getTableColumns()} data={items} pagination={true} onChange={this.onPageChange}/>
</div>

onPageChange(pagination, filters, sorter) {
//projectId = this.props.match.params;
alert(pagination.current)
}

Answer 1

您在 ReactTable 组件上调用了错误的受控状态回调。而不是 onChange 尝试调用 onPageChange:

<div className="article_full">
   <h2>DETAILS</h2>
   <ReactTable 
      filterable 
      columns={this.getTableColumns()} 
      data={items} 
      pagination={true} 
      onPageChange={this.onPageChange}/>
</div>

onPageChange(pageIndex) {
   alert(pageIndex);
}

您可以使用此 working example on codesandbox

进行测试

可能的回调列表

可能的回调列表基于 react-table documentation:

// Callbacks
onPageChange={(pageIndex) => {...}} // Called when the page index is changed by the user
onPageSizeChange={(pageSize, pageIndex) => {...}} // Called when the pageSize is changed by the user. The resolve page is also sent to maintain approximate position in the data
onSortedChange={(newSorted, column, shiftKey) => {...}} // Called when a sortable column header is clicked with the column itself and if the shiftkey was held. If the column is a pivoted column, `column` will be an array of columns
onExpandedChange={(newExpanded, index, event) => {...}} // Called when an expander is clicked. Use this to manage `expanded`
onFilteredChange={(filtered, column) => {...}} // Called when a user enters a value into a filter input field or the value passed to the onFiltersChange handler by the Filter option.
onResizedChange={(newResized, event) => {...}} // Called when a user clicks on a resizing component (the right edge of a column header)

如何在反应中获取当前页码onPagechange函数

How to get current page number onPagechange function in react

reactjs

react-table

可能的回调列表