基于antd react实现分页加载的拉下选择器

最新推荐文章于 2023-12-26 16:24:04 发布

xmr79

最新推荐文章于 2023-12-26 16:24:04 发布

阅读量1k

点赞数 1

文章标签： react.js 前端 typescript 前端框架

本文链接：https://blog.csdn.net/xmr79/article/details/128851024

版权

这篇博客记录了作者在项目中实现基于antd的React分页加载选择器的过程，主要供个人日后查阅和分享。文章介绍了组件的初始化数据和功能实现。

摘要由CSDN通过智能技术生成

声明：网上类似这种的应该很多，我这里只是项目用到，自己记录一下，方便以后遇到cv代码

定义初始数据

interface PointOfSaleFormFiberInitialStateType {
  blocLevelList: CommonServersType.GetblocLevelListItem[]; // 列表
  blocLevelLoading: boolean; // 是否加载
  currPage: number; // 请求分页
  total: number; // 列表总量
  searchValue: string; // 输入框内容
}

const PointOfSaleFormFiberInitialState: PointOfSaleFormFiberInitialStateType = {
  blocLevelList: [],
  blocLevelLoading: false,
  currPage: 1,
  total: 0,
  searchValue: '',
};

// 防抖需要的变量
let searchFlag: any = null;

下面是组件功能


// 自定义的hook，功能类似setState
  const [state, setState] = useSetState(PointOfSaleFormFiberInitialState);

  const { blocLevelList, currPage, total, blocLevelLoading, searchValue } = state;


// 获取列表
  const getBlocLevelList = useCallback(
    (_props: { page: number; list: any[]; value?: string }): any =