当前分页为20页，react点击全选20页内容全部选中

在React应用中，当用户想要实现分页并全选所有页面的内容，通常会设计一个表格组件，并包含一个全选按钮。这个过程可以分为以下几个步骤：

1. **状态管理**：在组件内部维护一个布尔值状态`isAllSelected`用于记录是否所有行都被选中，以及一个数组`selectedRows`存储被选中的行索引。

2. **全选按钮处理**：当全选按钮被点击时，你可以遍历当前页的数据，设置每个数据项的`isSelected`属性为`isAllSelected`的状态。同时，更新`selectedRows`为当前页的所有行索引，并可能需要更新`isAllSelected`状态。

// 假设`currentPageData`是当前页的数据
handleSelectAll = () => {
  const currentPageDataLength = currentPageData.length;
  this.setState({
    isAllSelected: true,
    selectedRows: Array.from({ length: currentPageDataLength }, (_, i) => i),
  });
}

3. **复选框事件监听**：在每一页的数据单元格上添加一个`onChange`事件处理器，如果全选按钮未被点击，则只改变单个元素的选中状态；如果全选，则跟随全局的`isAllSelected`状态。

4. **渲染复选框**：在表格单元格内显示复选框，并绑定`onChange`事件到`toggleSelection`方法，该方法可以根据全局状态调整单个行的选中状态。

5. **显示选中状态**：在展示数据的地方，可以使用条件渲染来显示行的选中图标或颜色，比如绿色背景表示已选，灰色背景表示未选。