react分页效果

很逗比的时候写的分页，更逗比的时候发出来，

const numb = {
    firstPage:1,
    currentPage:null,
    totalPage:null,
    pageNumber:null,
};

this.state = {
    //分页相关
    firstPage:1,
    currentPage:1,
    showNumber:5,
}

//分页控制

 //创建分页

this.makePage = this.makePage.bind(this);
 //常规点击
this.normalClick = this.normalClick.bind(this);
 //尾页
this.endPage = this.endPage.bind(this);
 //首页
this.firstPage = this.firstPage.bind(this);
 //上一页
this.prevePage = this.prevePage.bind(this);
 //下一页
this.nextPage = this.nextPage.bind(this);
 //计算要显示的页
this.handlePage = this.handlePage.bind(this);
 //handlePage里的过度方法
this.makeBTN = this.makeBTN.bind(this);
 //点击请求数据
this.handPageData = this.handPageData.bind(this);
 //分页逻辑控制
    makeBTN(i,b){
        const anniu = [
            <RaisedButton  label={ i} onTouchTap = { i<=numb.totalPage ?b :null}  primary = {i===this.state.currentPage? true:false} style = {styles.normalBTN}/>,
    ]
        return anniu;
    }
    makePage(){
        const page = [
            <div style ={styles.needCenter} >
    <RaisedButton  label="首页" onTouchTap = {!(this.state.currentPage===1)?this.firstPage:null} style={styles.bottonBTN}/>
    <RaisedButton  label="上一页" onTouchTap = {!(this.state.currentPage===1)? this.prevePage:null} style={styles.bottonBTN}/>
        {this.handlePage()}
    <RaisedButton  label="下一页" onTouchTap = {!(this.state.currentPage===numb.totalPage|| numb.totalPage===0)? this.nextPage:null} style={styles.bottonBTN}/>
    <RaisedButton  label="尾页" onTouchTap = {!(this.state.currentPage===numb.totalPage)?this.endPage:null} style={styles.bottonBTN}/>
    <RaisedButton  label={(this.state.currentPage===1 | this.state.currentPage===numb.totalPage )? "共"+numb.totalPage+"页":this.state.currentPage+'/'+numb.totalPage} style={styles.bottonBTN}/>
    </div>,
    ]
        return page;
    }
    handPageData(a,b,c,d){

    }
    handlePage(){
        numb.totalNumber = this.store._number;
        console.log(numb.totalNumber,"00000000011111111111");
        //数组个数求多少个页面
        let n = numb.totalNumber;
        //设定实验数组值
        //根据数组值算出页面数
        //这个值有可能是浮点型
        // let pp = n/numb.showNum;
        let pp = n/this.state.showNumber;
        //如果是浮点型，取最大的整型值
        let p =Math.ceil(pp);
        numb.totalPage = p;
        //如果页面的求值为整型就直接返回，不是得话，就返回最大的整型
        let ap = pp === 0 ? pp : p ;
        //最终的页数，只能展示10个页面
        let fp = p <10 ? p :10;
        numb.pageNumber = fp;
        let arr = new Array();
        for(let i = this.state.firstPage ; i <= this.state.firstPage+fp-1;i++){
            const num = [this.makeBTN(i,  this.normalClick.bind(null,i))] ;
            arr.push(num);
        }
        return arr;
    }
    endPage(){
        let ctx = this;
        numb.firstPage = numb.totalPage - numb.pageNumber+1;
        ctx.setState(
            {
                firstPage:numb.totalPage - numb.pageNumber+1,
                currentPage:numb.totalPage,
            },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
    );
    }
    firstPage(){
        let ctx = this;
        ctx.setState(
            {
                firstPage:1,
                currentPage:1,
            },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
    );
    }
    nextPage(){
        if(this.state.currentPage < numb.totalPage - numb.pageNumber){
            let ctx = this;
            numb.currentPage =  ++this.state.currentPage;
            numb.firstPage=numb.currentPage;
            ctx.setState(
                {
                    firstPage:numb.firstPage,
                    currentPage:numb.currentPage,
                },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
        );
        }else{
            let ctx = this;
            numb.currentPage =  ++this.state.currentPage;
            numb.firstPage=numb.currentPage;
            ctx.setState(
                {
                    firstPage:numb.totalPage - numb.pageNumber+1,
                    currentPage:numb.currentPage,
                },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
        );
       }
    }
    prevePage(){
        if(this.state.currentPage>numb.pageNumber){
            if(this.state.currentPage>numb.totalPage - numb.pageNumber+1){
                numb.firstPage--;
                let ctx = this;
                numb.currentPage =  this.state.currentPage-1;
                ctx.setState(
                    {
                        firstPage:numb.totalPage - numb.pageNumber+1,
                        currentPage:numb.currentPage,
                    },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
            );}else{
                numb.firstPage--;
                let ctx = this;
                numb.currentPage =  this.state.currentPage-1;
                ctx.setState(
                    {
                        firstPage:numb.currentPage,
                        currentPage:numb.currentPage,
                    },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
            )
            }
        }else{
            numb.firstPage--;
            let ctx = this;
            numb.currentPage =  this.state.currentPage-1;
            ctx.setState(
                {
                    firstPage:1,
                    currentPage:numb.currentPage,
                },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
        );
        }
    }
    normalClick(i)
    {
        if(i<=numb.totalPage - numb.pageNumber){
            let ctx = this;
            numb.firstPage =i;
            numb.currentPage = this.state.currentPage;
            ctx.setState(
                {
                    firstPage:i,
                    currentPage:i,
                },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}
        );
        }else{
            let ctx = this;分页视频2            numb.firstPage =numb.totalPage - numb.pageNumber+1;
            numb.currentPage = this.state.currentPage;
            ctx.setState(
                {
                    firstPage:numb.totalPage - numb.pageNumber+1,
                    currentPage:i,
                },()=>{this.handPageData(this.state.currentPage,this.state.showNumber,this.state.stage,this.state.keyWord)}

        );
        }
    }

//分页
因为pgAdmin数据比较少，就分别用每页展示一行数据和三行数据记录了下，附上效果视频分页效果1，分页效果2。秉着一颗学徒的心。。。