关于react的分页

基于antdesign分页：
表格属性pagination
<Table
pagination={{
total: this.state.totalNum,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ['10', '20', '50'],
defaultPageSize: this.state.pageSize,
showTotal: total => {
return `共${total}条`;
},
}}
onChange={this.onTableChange}
/>

在 state里面声明
this.state = {
pageSize: 20, // 表格size
pageNo: 1, // 表格页数
totalNum: null, // 表格数据总数
};
进入页面的时候获取到关于分页的数据
componentWillMount() {
this.getData();
}
// 获得数据
getData = () => {
this.setState({loading: true});
promiseAjax.post('tp/summaryGroups/page', {
pageSize: this.state.pageSize,
pageNo: this.state.pageNo,
orders: {
beginDate: 'desc',
}, // orders排列顺序
}).then(res => {
if (res.code === '0') {
this.setState({
data: res.data.data,
pageSize: res.data.pageSize,
pageNo: res.data.pageNo,
totalNum: res.data.totalNum,
});
}
}

// 表格变动
onTableChange = (pagination) => {
this.setState({
pageSize: pagination.pageSize,
pageNo: pagination.current,
}, () => {
this.getData();
});
}
注意⚠️
在table里面onChange事件的位置，如果pagination作为 table的属性来写那么onChange写在pagination的外面，如上。如果pagination作为单独的组件，onChange事件则需要写在pagination的里面，可以参考antdesign的分页组件的API