一个常见的场景,页面顶部一堆搜寻条件,条件的开端是搜寻按钮和重置按钮,上面是一个列表。
设计一套没有问题的搜寻,重置逻辑。
第一,将这些搜寻条件和搜寻按钮,重置按钮封装成一个组件,因为重置也是搜寻,所以暴露出一个回调即可。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参数 }