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

最新推荐文章于 2024-08-30 14:31:55 发布

不帅的喆

最新推荐文章于 2024-08-30 14:31:55 发布

阅读量5.6k

点赞数

分类专栏： React 文章标签： react 翻页

本文链接：https://blog.youkuaiyun.com/qq_35414779/article/details/79716288

版权

本文介绍了如何在MaterialUI缺少内置分页功能的情况下，通过React封装一个简单的分页组件。作者提供了最终效果展示，并详细说明了组件的具体使用方法，包括导入组件并传递total总数和onChange回调函数来实现功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>