基于antd ,react Hooks 搜索条件,列表查询逻辑

HeiYanjing

一个常见的场景,页面顶部一堆搜索条件,条件的末尾是搜索按钮和重置按钮,下面是一个列表。
设计一套没有问题的搜索,重置逻辑。

第一,将这些搜索条件和搜索按钮,重置按钮封装成一个组件,因为重置也是搜索,所以暴露出一个回调即可。SearchCallBack(...searchObject)

因为antd的Table的pagination有几个属性

const [pagination,setPagination]=useState({
    current:1,
    pageSize:10,
    total:0,
    showTotal:(totalNum:Number) => `共${totalNum}条`,
    pageSizeOptions:['10','20','50','100'];
    showSizeChanger:true,
    showQuickJumper:true,
})

页面中也有一个变量,用于存放搜索条件对象
const [searchObj,setSearchObj] =useState({...defaultSearchObj});
触发搜索操作有三种情况
1,页面初始化完成,各种初始化条件均为空,默认查所有结果

useEffect(()=>{
    search();
},[])

2,页码发生变化,或者一页展示条数发生变化

useEffect(()=>{
    search();
},[pagination.current,pagination.pageSize])

3,搜索或者重置按钮触发

const SearchCallBack=(obj:any)=>{
    setSearchObj({...obj});
    if(pagination.current !== 1){
        setpation({...pagination,current:1,pageSize:10});
    }else{
        search(obj);
    }
}

搜索方法接收一个可选参数

  const  search= (obj ?:any)=>{
    // 如果obj为真,取obj参数,不然就取searchObj参数
  }
阅读 102

生活本就很艰难,且行且珍惜。

1 声望
0 粉丝
0 条评论
你知道吗?

生活本就很艰难,且行且珍惜。

1 声望
0 粉丝
宣传栏