一、Antd-Select提供幾種型別

• 最基礎版只提供下拉功能的選擇器
• 帶搜尋功能的下拉選擇器
• 可多選的下拉選擇器
• 可搜尋、可多選、可隨意輸入內容的tag下拉選擇器(支援自動分詞)
• 多級聯動下拉選擇器
• 搜尋遠端資料下拉框

二、一些潛在用法

如果Select.Option選項的數量特別大:2k、3k...

假設請求資料時間我們都解決好了,信心滿滿地準備把資料填充到<Select.Option>後下班!過會你會發現有多絕望..

這下拉框載入了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,xxx2...]
}

所以我的寫法是options[xxx],然後遍歷相應的陣列即可

當然這僅僅是一種思路,更好的實現方法有很多！希望這能成為你的方法的一個墊腳石

有時候多看看官方文件真的很有幫助.學習的不僅僅是它的方法,還有它的思路。如果遇到它的一些特殊語法(語法糖),也可以到ant-design-pro裡查閱

《ant-design-pro》

使用antd UI框架中的select需要注意的一些問題

問題1：滾動跟隨問題

問題描述：使用表單時，當頁面過長出現滾動，select的下拉框不會跟隨輸入框，造成使用者體驗性不好

解決方法：在 Option 或Select.Option 中新增 getPopupContainer={(triggerNode) => triggerNode.parentNode}，完美解決

問題2：可輸入過濾選項問題

問題描述：通過輸入過濾選項

解決方法：在 Option 或Select.Option 中新增 showSearch 與 optionFilterProp="children"，完美解決

問題3：動態載入

問題描述： 動態分頁載入option的選項，並且，滾動載入更多，可支援關鍵字搜尋（由後端查詢資料庫放回資料）
解決方法:：
1、當搜尋框聚焦時，獲取資料，如10條，關鍵字為空
2、將資料遍歷到option選項中
3、選項的滾動，當滾動到底部時，載入下一頁的資料，在option中新增方法 onPopupScroll={this.scrollMore} scrollMore函式如下

scrollMore = (e) => {
 e.persist();
 if(this.state.scrollFlag){  //scrollFlag 節流閥，防止操作頻繁沒將資料完全載入
 const { target } = e;
 if ((target.scrollTop + target.offsetHeight) > (target.scrollHeight-25)) { //當滾動到最底部25畫素的時開始載入
  const { Params } = this.state;
  var pindex = Params.pageIndex +1;
  if(pindex <= this.state.pageEnd){ //判斷要查詢的頁是否已經是最後一頁了
  this.setState({
   scrollFlag: false,Params:{...this.state.Params,pageIndex:pindex}
  },() => {
   this.getList();  //獲取option的資料
  })
  }
 }
 }
}

至此，滾動載入完成，要注意，在每次聚焦的時候，pageIndex都要先置為1，即從第一頁開始查詢，否則就是從先前滾動到的那一頁。在獲取到資料之後，即在getList函式內，要對獲取到的資料進行處理，要把獲取到的資料拼接在list後面，否則會造成載入更多時之前的資料不見了，並且，在pageIndex是1的時候不拼接，直接賦值。

4、在輸入值時會觸發option的onSearch事件，在函式裡進行查詢並重新複製list

此時，會發現一個問題，查詢後的值不會馬上出來，會等到下一次聚焦搜尋框時才會出現。

解決方法：在option中加 filterOption={false}
這樣就實現了條件的過濾和關鍵字的過濾。

到此這篇關於深入理解Antd-Select元件的用法的文章就介紹到這了,更多相關Antd-Select元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！