Ant Design分页器 重置页码

项目场景：

	有一个弹窗,弹窗中包含一个带页码的table和一个搜索框。搜索框可以根据关键字搜索,table展示对应数据,点击页码展示对应数据

---

问题描述

	关闭弹窗,清空搜索框,并重置页码回到第一页

---

思路：

使用hook+Antd，首先想到的是利用ref去控制,实际操作中，ref.current.setValue('')·可以清空搜索框,但是无法利用ref去控制table中的页码

---

解决方案：

Antd中的Pagination中的api 有两个参数，current和onChange,current是当前页码,onChange是当前页码和pageSize改变时候的回调函数,定义current为state中的数据,在onChange中去setState对应页码,关闭弹窗时候再重置为1

代码如下：

	import { Table, Modal, Input} from 'antd';
	import React, {  useState} from 'react';
	function component(){
		const myRef = React.createRef();
		const [currentNum, setCurrentNum] = useState(1);//当前页
		const cancle = () => {
		    myRef.current.setValue("")//清空搜素框
		    setCurrentNum(1) //重置为第一页
  		}
  		return(
			<Modal
			 onCancel={() => cancle()}
			 >
			 <Input ref={myRef}  onChange={searchFn} />
			 <Table
			  columns={columns}
          	  dataSource={dataSource}
          	  pagination={{ 
          	  pageSize:5,//每页条数
          	  current:currentNum,//当前页码
          	  onChange:(page)=>{setCurrentNum(page)}}} 
          	  />
			 </Modal>
		)
	}