一、Antd-Select提供幾種類型
-
最基礎版只提供下拉功能的選擇器
-
帶搜索功能的下拉選擇器
-
可多選的下拉選擇器
-
可搜索、可多選、可隨意輸入內容的tag下拉選擇器(支持自動分詞)
-
多級聯動下拉選擇器
-
搜索遠程數據下拉框
二、一些潛在用法
如果Select.Option選項的數量特別大:2k、3k...
假設請求數據時間我們都解決好了,信心滿滿地准備把數據填充到`這下拉框加載了10s還沒出來！?這時候先想着去antd文檔上找解決方法,無果后百度、SF、google....因為antd每次都會重新渲染<Select.Option>,所以要降低卡頓時間,唯一辦法就是減少渲染的數量
可以來體驗一下:《antd-Select加載2k條數據演示》
發現問的人倒挺多,真正解決的回答沒見到幾個(我還沒找到..)
有的勸着放棄吧,加了那么多用戶也不會看(確實如此),改做成一個搜索下拉框.稍微執拗一點的繼續掙扎,終於找到了一個能優化加載速度的插件《react-select-fast-filter-options》
然后過會又發現,搜索功能肯定也需要的呀!總不能讓用戶翻那2000條數據.不然可能半夜還在被投訴.
帶着最后一點希望,找了一下github上antd的Issues,里面給的回答倒是挺有啟發的,但是還是沒有正確的解決辦法.《ant-design:Issues》
於是就自己設計了一個,新手代碼請見諒,希望對你有幫助.
//render
const { optionsData } = this.state;
<Select style={{ width: 200 }}
showSearch
onChange={this.handleSecChange}
placeholder="請輸入/選擇xxx"
onSearch={this.handleSerach}
>
{
optionsData.length && optionsData.map( (item, index) => (
<Select.Option key={index} value={item}>{item}</Select.Option>)
)
}
</Select>
//搜索Value值改變觸發回調函數
handleSerach(e){
let { clusterValue } = this.state;
let that = this;
//類似函數節流
setTimeout(function(){
that.loadOption(clusterValue, e)
},300)
}
loadOption(clusterValue, keyWords){
const { options } = this.props.data; //獲得2k條數據
let newOptionsData = [];
let arrData = options[clusterValue];
if(Object.keys(options).length){
let len;
if(arrData.length > 100) len = 100;
else len = arrData.length;
//初始化
if(keyWords == ''){
for(var i=0;i<len;i++){
newOptionsData.push(arrData[i])
}
}
//用戶搜索
else{
newOptionsData = [];
for(var j = 0; j < arrData.length; j++){
if(arrData[j].indexOf(keyWords) != -1){
newOptionsData.push(arrData[j]);
if(newOptionsData.length > 100) break;
}
}
}
}
// return newOptionsData
this.setState({
optionsData: newOptionsData
})
}
- 在
handleSearch函數添加定時是為了解決每次輸入都立刻請求,導致卡頓;用戶輸入完成后再統一查找,雖然會導致在搜索的時候增加300ms空白期,但是比用戶輸入卡頓要好 - 把渲染數量控制在
100條內,防止卡頓,一般用戶查找一個數據,也會輸入得比較完整,不可能會在100條內查找。 - 區分初始化和搜索兩個不同情況,用戶剛進入界面的時候,並沒有關鍵字搜索,所以這時候要初始化
前100條內容給用戶,當然你也可以按照一定的條件渲染數據給用戶,只要保證合理數量以內即可 - 因為我的數據是多級聯動的
options:{
'key': [xxx,xxx1,xxx2...],
'key1': [xxx,xxx1,xxx2...]
}
所以我的寫法是options[xxx],然后遍歷相應的數組即可
當然這僅僅是一種思路,更好的實現方法有很多！希望這能成為你的方法的一個墊腳石
有時候多看看官方文檔真的很有幫助.學習的不僅僅是它的方法,還有它的思路。如果遇到它的一些特殊語法(語法糖),也可以到ant-design-pro里查閱