如何在点击react-paginate生成的li元素时触发页面切换事件

方案1：CSS适配（推荐，无需修改JS逻辑） #

直接让<a>标签占满整个<li>的可点击区域，点击li任意位置都会触发a标签的原生点击事件：

/* 假设你的分页组件外层类名为pagination-container */
.pagination-container li {
  cursor: pointer;
  /* 原li的内边距可以移除，转移到a标签上 */
  padding: 0;
}
.pagination-container li a {
  display: block;
  width: 100%;
  height: 100%;
  /* 把原li的内边距写在这里 */
  padding: 6px 14px;
  /* 可选：去掉a标签的默认下划线等样式 */
  text-decoration: none;
  color: inherit;
}

方案2：自定义分页项渲染 #

利用react-paginate提供的自定义渲染属性，直接将点击事件绑定到li元素上：

import ReactPaginate from 'react-paginate';

// 自定义页码项组件
const PageItem = ({ onClick, href, children }) => {
  return (
    <li onClick={onClick} style={{ padding: '8px 12px', background: '#fff' }}>
      <a href={href}>{children}</a>
    </li>
  );
};

// 使用组件时传入自定义配置
<ReactPaginate
  // 你的原有配置，比如pageCount、onPageChange等
  pageCount={totalPage}
  onPageChange={handlePageChange}
  // 传入自定义的页码项组件
  pageComponent={PageItem}
/>

方案3：事件委托适配 #

如果不想修改原有组件配置和样式，可通过父容器事件委托实现点击li触发跳转：

const handlePaginationClick = (e) => {
  // 判断点击源是否在li内
  const targetLi = e.target.closest('.react-paginate li');
  if (targetLi) {
    // 触发内部a标签的点击事件
    targetLi.querySelector('a')?.click();
  }
};

// 给分页组件外层绑定事件
<div onClick={handlePaginationClick}>
  <ReactPaginate {...yourProps} />
</div>

内容的提问来源于stack exchange，提问作者sho