Antd Pagination 解决点击重置按钮后分页器不刷新问题

原创已于 2024-03-27 10:21:30 修改 · 置顶 · 526 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2024-03-27 10:06:32 首次发布

React 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用ReacthooksuseState实现表格分页的动态管理，包括初始化、重置分页设置和处理pageSizeChange事件，展示了如何在Pagination组件中应用这些功能。

问题描述：

原本：

问题：

解决方法：

const [resetPageSize, setResetPageSize] = useState(10);

setResetPageSize(10)
pageSize={resetPageSize}

pageSizeChange

    //初始化
    const [resetPageSize, setResetPageSize] = useState(10);
     //重置方法
    const resetScreeningForm = () => {
        // 重置 pageSizeOptions
        setRzTableList({
            "createTime": null,
            "pageNum": 1,
            "pageSize": 10,
            "param": null
        });
        setResetPageSize(10)
        screeningForm.resetFields();
    };
    const pageSizeChange = (current, pageSize) => {
        setResetPageSize(pageSize)
    }

  <Pagination
                            style={{float: "right"}}
                            total={tableSource.total}
                            current={currentPage}
                            defaultPageSize={10}
                            defaultCurrent={1}
                            onChange={onPageChange}
                            pageSize={resetPageSize}
                            onShowSizeChange={pageSizeChange}
                            showSizeChanger={true}
                        />