Arco Design的Pagination分页组件如何实现点击页码后执行自定义事件？

竞一 Dev 提问于 2026-02-04 19:22:31 阅读 36

组件

在用Arco Design的分页组件时，我想让点击页码后除了切换页面还能执行自定义函数，但发现onChange事件返回的参数好像不对，我尝试过这样写：


const handlePageChange = (page) => {
  console.log('当前页码:', page); // 输出一直是undefined
  // 需要在这里调用API请求新数据
};

return (
  <Pagination
    current={currentPage}
    total={100}
    onChange={(page) => handlePageChange(page)}
  />
);

但控制台打印出来的page是undefined，页面切换倒是正常。是不是事件参数的传递方式有问题？或者需要配合其他属性使用？

我来解答赞 8 收藏

反馈

2 条解答

上官子璐 Lv1

Arco Design 的 Pagination 组件 onChange 事件确实会返回当前页码参数。你的问题可能是由于错误使用了 current 属性导致的。改成这样：

const handlePageChange = (page) => {

  console.log('当前页码:', page); // 这里应该正确输出

  // 调用API请求新数据

};



return (

  <Pagination

    total={100}

    onChange={handlePageChange}

  />

);

2026-02-04 20:10

端木兴敏 Lv1

先检查一下你用的 Arco Design 版本，这个坑我踩过。如果你用的是 2.x 版本，Pagination 的 onChange 参数确实是 page，但 3.x 开始改成 (page, pageSize) 两个参数了。

你现在写法相当于只取了第一个参数，结果被 pageSize 占用了。改成这样：

const handlePageChange = (page, pageSize) => {

  console.log('当前页码:', page); // 现在能拿到正确值了

  // 调用API请求新数据

};



return (

  <Pagination

    current={currentPage}

    total={100}

    onChange={handlePageChange}

  />

);

另外注意：
1. 确保 Pagination 的 current 属性是受控状态（即 currentPage 是 state）
2. 如果你在 handlePageChange 里要请求数据，记得加上防抖
3. 如果需要在页面加载时主动触发一次请求，可以用 useEffect 监听 currentPage 变化

这个版本升级的坑，文档没标红警告真说不过去。

2026-02-04 19:32