Ant Design Pagination组件修改pageSize时如何重置当前页码为1？

需求说明 #

当通过onShowSizeChange修改pageSize时，将分页的current参数重置为1，而非沿用原有current值（Ant Design默认行为）。

场景示例 #

当前分页状态为pageSize=10、current=2，将pageSize从10调整为20时，需要current自动重置为1，而非保持为2。

实现方案 #

你提供的实现代码完全可以满足需求，核心思路是监听每页条数切换的回调，主动重置页码状态：

function App() {
  const [current, setCurrent] = React.useState(1);

  return (
    <Pagination
      current={current}
      onChange={setCurrent}
      showSizeChanger={true}
      onShowSizeChange={() => setCurrent(1)}
      total={1000}
    />
  );
}

逻辑说明 #

• onChange回调负责处理用户正常切换页码的逻辑，同步最新的页码到状态中
• onShowSizeChange回调专门监听用户切换每页条数的动作，触发时直接把页码重置为1即可

内容的提问来源于stack exchange，提问作者Loi Nguyen Huynh