1,使用dropdownRender做输入搜索
dropdownRender={(menu) => (
<>
{menu}
<Divider
style={{
margin: '8px 0',
}}
/>
<Space
style={{
padding: '0 8px 4px',
}}
>
<Input
placeholder="请输入搜索内容"
// ref={inputRef}
// value={name}
onChange={onSearchChange}
allowClear
/>
<Button type="text" icon={<ZoomInOutlined />} onClick={searchItem}>
搜索
</Button>
</Space>
</>
)}
searchItem:
const searchItem=()=>{
setSelectPage(1)//重置页码为1
getSelectData(1)//此方法为调接口的方法
}
onSearchChange:
const onSearchChange=(e)=>{
setSearchValue(e.target.value);//调接口时将此值作为入参
}
使用onPopupScroll使鼠标滑到底部时请求下一页数据
onPopupScroll={handPopupScroll}
handPopupScroll:
const handPopupScroll=(e)=>{
const {total}=selectData
const page=selectPage
if(Math.ceil(total/10==page)) return
e.persist()
const {target}=e
if(Math.ceil((target.scrollTop+target.offsetHeight)>=target.scrollHeight)){
let newPage=page+1
setSelectPage(newPage)
getSelectData(newPage)
}
}
2输入时调接口
使用onSearch
onSearch={(value) => onChangeSelect(value)}
onChangeSelect:
const onChangeSelect=(value)=>{
setSelectPage(1)//重置为第一页
getSelectData(1,value)//调接口方法
}