React 分页，搜索分页_商品搜索分页react-优快云博客

本文链接：https://blog.youkuaiyun.com/sshgdgd/article/details/135498110

本文介绍了如何在React项目中使用AntDesign库的Pagination组件进行分页，并实现搜索功能，通过useState管理状态和处理onChange事件以更新页面和触发接口请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install antd --save

引入

import { Pagination} from "antd";

  state = {
    list: [],
    currentPage: 1,
    pageSize: 5,
    total: 0,
    search: "",
  };

页面中使用
current={currentPage}为设置的默认页数， pageSize={pageSize}为设置的条数
total为总页数

    <Pagination
            current={currentPage}
            pageSize={pageSize}
            className="pga"
            total={total}
            showSizeChanger
            showQuickJumper
            onChange={this.handlePageChange}
          />

给onChange 的handlePageChange 的分页逻辑

  handlePageChange = (page, pageSize) => {
    const { search } = this.state;  //search为state设置的搜索框的值
    this.setState(
      {
        currentPage: page,
        pageSize: pageSize,
      },
      () => {
        if (search) {
          TeacherSearch({ name: search, page: page, pagelimit: pageSize }) //搜索调用的接口
            .then((res) => {
              this.setState({
                list: res.data.data || [],
                total: res.data.pagecount || 0,
              });
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.fetchData();
        }
      }
    );
  };

//获取到列表全部数据  
fetchData = () => {
    const { currentPage, pageSize, search } = this.state;
    let params = { page: currentPage, pagelimit: pageSize };
    if (search) {
      params.name = search;
    }
    TeacherList(params)
      .then((res) => {
        this.setState({
          list: res.data.data,
          total: res.data.pagecount,
        });
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

//搜索分页
  onSearch = (e) => {
    const { name, value } = e.target;
    const { currentPage, pageSize } = this.state;
    this.setState({     //获取到搜索框的值
      [name]: value,
    });
    if (value === "") {  //搜索框为空返回全部的数据
      this.fetchData();
    } else {
      TeacherSearch({ name: value, page: currentPage, pagelimit: pageSize })
        .then((res) => {
          this.setState({
            list: res.data.data || [],
            total: res.data.pagecount || 0,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };