Antd-Select元件的深入用法
摘要：
一、Antd-Select提供幾種型別
最基礎版只提供下拉功能的選擇器
帶搜尋功能的下拉選擇器
可多選的下拉選擇器
可搜尋、可多選、可隨意輸入內容的tag下拉選擇器(支援...
一、Antd-Select提供幾種型別
-
最基礎版只提供下拉功能的選擇器
-
帶搜尋功能的下拉選擇器
-
可多選的下拉選擇器
-
可搜尋、可多選、可隨意輸入內容的tag下拉選擇器(支援自動分詞)
-
多級聯動下拉選擇器
-
搜尋遠端資料下拉框
二、一些潛在用法
如果Select.Option選項的數量特別大:2k、3k...
假設請求資料時間我們都解決好了,信心滿滿地準備把資料填充到<Select.Option>
後下班!過會你會發現有多絕望..
這下拉框載入了10s
還沒出來！?這時候先想著去antd文件上找解決方法,無果後百度、SF、google....因為antd每次都會重新渲染<Select.Option>
,所以要降低卡頓時間,唯一辦法就是減少渲染的數量
可以來體驗一下:ofollow,noindex">《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 100條內 前100條
options:{
'key': [xxx,xxx1,xxx2...],
'key1': [xxx,xxx1,xxx2...]
}
所以我的寫法是options[xxx]
,然後遍歷相應的陣列即可
當然這僅僅是一種思路,更好的實現方法有很多！希望這能成為你的方法的一個墊腳石
有時候多看看官方文件真的很有幫助.學習的不僅僅是它的方法,還有它的思路。如果遇到它的一些特殊語法(語法糖),也可以到ant-design-pro
裡查閱