react ant 分页

下载antd：

npm install antd --save

需要展示页面引入：

import {Table,Tag,Space,Button } from "antd";

在回调函数中定义：

//回调函数
  constructor(props){
    super(props);
    this.state= {
      //  当前页
       page:1,
      //  每页显示
      pagesize:3,
      //  总条数
      total:'',
     //数据
    data：[],
  }

请求数据：

//页面首次加载请求数据

    componentWillMount(){
        this.axios()

    }
// Axios  内的请求头和token是经过处理的，这里没有展示请求头和地址了
    axios=()=>{
        Axios.post(Api.user.Membership,{
            page:this.state.page,
            pageSize:this.state.pagesize
        })
            .then((res)=>{
                console.log(res)
                if(res.status===200){//判断请求数据是否成功
                    this.setState({
                        data : res.data,
                        total:res.count
                    })
                    console.log('获取成功')
                }else{
                    console.log('获取失败')
                }

            }).catch((err)=>{
            console.log('出错')
        })
    }

分页 onChange

 //分页
    onChange= (page, pageSize) => {
        console.log('Page: ', page);//当前页
        console.log('pageSize: ', pageSize);//每页显示条数,已被固定写死
//分页变化setSate存在异步 
        new Promise(resolve => {
            this.setState({
                page: page,
            })
            resolve()
        }).then(()=>{
                this.axios()
            }
        )
    }

render() {
return (
<div>
<Pagination showQuickJumper defaultCurrent={this.state.page} defaultPageSize={this.state.pagesize} total={this.state. total} onChange={this.onChange}/>
</div>
)}