react+materialUI完成自己的翻页组件

material是不带翻页工具的，这一点相比较antd还是有一些鸡肋。

所以楼主简单封装了一个翻页组件，话不多说。上代码

import React from "react";
import ChevronLeft from 'material-ui/svg-icons/navigation/chevron-left';
import ChevronRight from 'material-ui/svg-icons/navigation/chevron-right';
import {FlatButton, Toolbar, ToolbarGroup} from "material-ui";

class Pagination extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            page: 1
        }
    }

    setPage(page) {
        this.setState({
            page
        },()=>{this.props.onChange(page)})
    }

    render() {
        const {total} = this.props;
        const {page} = this.state;
        const allPage = Math.ceil(total / 10) || 1;
        return (
            allPage > 1 &&
            
                
                    

                        {
                            `${(page - 1) * 10 + 1}-${page * 10} of ${total}`
                        }
                    
                    

                        {
                            }
                                        disabled={page <= 1}
                                        onClick={() => this.setPage(page - 1)}/>
                        }
                        {
                            `当前页：${page}`
                        }
                        {
                            }
                                        disabled={page === allPage}
                                        onClick={() => this.setPage(page + 1)} labelPosition="before"/>
                        }
                    
                
            
        )
    }
}

export default Pagination

最终效果图

具体使用

import Pagination from 'Pagination'

this.onChange(page)}>

导入组件后，传入total参数和onChange回调函数就可以进行使用啦。