平時使用antd中Select的下拉一般就幾十幾百條，這時候直接使用組件模糊查詢就能實現大部分業務場景需求。

今天遇到一個需要模糊查詢并且總量上萬條的下拉框，如果一次性懟上去上萬條，會造成瀏覽器卡頓。所以這邊采用后端分頁，前端觸底加載刷新的方式去優化這個模糊查詢。

<SelectallowClear  //支持清除showSearch  //支持輸入filterOption={false}   //這個參數false才能支持接口數據動態刷新style={{ width: '100%' }}onSearch={this.diagNameonSearch}  //輸入onChange={this.diagNameChange}onPopupScroll={this.onPopupScroll}  //監聽下拉事件placeholder={'請選擇診斷'}getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)} //防止頁面滾動導致下拉框錯位>{Array.isArray(diagNameList) && diagNameList.map((item: any) => {if (item.itemName) {return <Option value={item.itemName}>11{item.itemName}</Option>}})}</Select>

diagNameChange = (e: any, action: any) => { //選擇事件this.updateState({ diagName: e, });console.log(action, 'action')if (action === undefined) {this.props.dispatch({type: 'admissionRecordCheck/pageGet',payload: {keyword: '',pageNum: 1,pageSize: 10,},})}
};
diagNameonSearch = (e: any) => { //輸入事件clearTimeout(this.state.antiShake) //加入防抖  防止輸入時反復調用接口this.setState({antiShake: setTimeout(() => {this.updateState({ //保存當前輸入值  用于后續觸底刷新keyword: e,})this.props.dispatch({type: 'admissionRecordCheck/pageGet',payload: {keyword: e,pageNum: 1,pageSize: 10,},})}, 1000)})
}
onPopupScroll = (e: any) => { //滾動事件 用于判斷觸底刷新const { pageGetpageNum, pageGetpageSize, diagNameList, keyword } = this.props.admissionRecordCheckconst { target } = e;const { scrollTop, scrollHeight, clientHeight } = target;if (scrollTop + clientHeight == scrollHeight) { //觸底 觸發分頁查詢接口！this.props.dispatch({type: 'admissionRecordCheck/pageGetScroll',payload: {keyword,pageNum: pageGetpageNum + 1,pageSize: 10,},}).then((res: any) => {if (res && res.resultCode == "000000") {let dataList = Array.isArray(res.data.dataList) ? res.data.dataList : []this.updateState({diagNameList: diagNameList.concat(dataList), //合并原數組pageGetpageNum: pageGetpageNum + 1,})} else {(res && res.resultMsg) ? message.warning(`${res.resultMsg}`) : message.error('請求錯誤！')}})}}