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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35414779/article/details/79716288

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 &&
            <Toolbar>
                <ToolbarGroup>
                    <div>
                        {
                            `${(page - 1) * 10 + 1}-${page * 10} of ${total}`
                        }
                    </div>
                    <div style={{marginLeft: '200px'}}>
                        {
                            <FlatButton primary key="prev" label="上一页" icon={<ChevronLeft/>}
                                        disabled={page <= 1}
                                        onClick={() => this.setPage(page - 1)}/>
                        }
                        {
                            `当前页：${page}`
                        }
                        {
                            <FlatButton primary key="next" label="下一页" icon={<ChevronRight/>}
                                        disabled={page === allPage}
                                        onClick={() => this.setPage(page + 1)} labelPosition="before"/>
                        }
                    </div>
                </ToolbarGroup>
            </Toolbar>
        )
    }
}

export default Pagination

最终效果图

具体使用

import Pagination from 'Pagination'

<Pagination total={this.state.total} onChange={(page)=>this.onChange(page)}>

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