How to reset the Pagination's current page when pageSize changes in Ant Design?

在使用Ant Design的分页组件时，当pageSize（每页显示的条目数）发生变化时，通常需要重置分页的当前页面到第一页，以避免出现用户界面不一致或数据显示错误的问题。要实现这一功能，可以通过更新组件的current状态来手动设置分页器回到第一页。

以下是一个具体的实现示例，使用React框架和Ant Design的Pagination组件：

jsx
import React, { useState } from 'react';
import { Pagination } from 'antd';

const App = () => {
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handlePageChange = (page, pageSize) => {
    // 当用户改变当前页时更新当前页状态
    setCurrent(page);
  };

  const handlePageSizeChange = (current, size) => {
    // 当用户改变每页条目数时，更新pageSize并重置当前页为第一页
    setPageSize(size);
    setCurrent(1);  // 重置当前页为第一页
  };

  return (
    <div>
      <Pagination
        current={current}
        pageSize={pageSize}
        total={200} // 假设总数据条目为200条
        onChange={handlePageChange}
        onShowSizeChange={handlePageSizeChange}
      />
    </div>
  );
};

export default App;

在这个例子中：

• 我们定义了current和pageSize两个状态，分别用于控制当前的页码和每页显示的条目数。
• 使用了Pagination组件的onChange和onShowSizeChange事件处理函数。当页码改变时触发onChange，而当页面大小改变时触发onShowSizeChange。
• 在handlePageSizeChange函数中，我们除了更新pageSize，还将current设置为1，这样用户在改变每页显示条目数后，视图会自动跳转到第一页。

这种做法确保了用户界面的一致性和数据的准确性，同时提升了用户体验。