一、Antd-Select提供幾種類型

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、鳳城網(wǎng)站維護(hù)、網(wǎng)站推廣。

• 最基礎(chǔ)版只提供下拉功能的選擇器
• 帶搜索功能的下拉選擇器
• 可多選的下拉選擇器
• 可搜索、可多選、可隨意輸入內(nèi)容的tag下拉選擇器(支持自動分詞)
• 多級聯(lián)動下拉選擇器
• 搜索遠(yuǎn)程數(shù)據(jù)下拉框

二、一些潛在用法

如果Select.Option選項(xiàng)的數(shù)量特別大:2k、3k...

假設(shè)請求數(shù)據(jù)時(shí)間我們都解決好了,信心滿滿地準(zhǔn)備把數(shù)據(jù)填充到后下班!過會你會發(fā)現(xiàn)有多絕望..

這下拉框加載了10s還沒出來！?這時(shí)候先想著去antd文檔上找解決方法,無果后百度、SF、google....因?yàn)閍ntd每次都會重新渲染,所以要降低卡頓時(shí)間,唯一辦法就是減少渲染的數(shù)量

可以來體驗(yàn)一下:《antd-Select加載2k條數(shù)據(jù)演示》

發(fā)現(xiàn)問的人倒挺多,真正解決的回答沒見到幾個(gè)(我還沒找到..)
有的勸著放棄吧,加了那么多用戶也不會看(確實(shí)如此),改做成一個(gè)搜索下拉框.稍微執(zhí)拗一點(diǎn)的繼續(xù)掙扎,終于找到了一個(gè)能優(yōu)化加載速度的插件《react-select-fast-filter-options》
然后過會又發(fā)現(xiàn),搜索功能肯定也需要的呀!總不能讓用戶翻那2000條數(shù)據(jù).不然可能半夜還在被投訴.

帶著最后一點(diǎn)希望,找了一下github上antd的Issues,里面給的回答倒是挺有啟發(fā)的,但是還是沒有正確的解決辦法.《ant-design:Issues》

于是就自己設(shè)計(jì)了一個(gè),新手代碼請見諒,希望對你有幫助.

//render
const { optionsData } = this.state;


{
  optionsData.length && optionsData.map( (item, index) => (
    {item})
  ) 
}

//搜索Value值改變觸發(fā)回調(diào)函數(shù)
handleSerach(e){
 let { clusterValue } = this.state;
 let that = this;
 //類似函數(shù)節(jié)流
 setTimeout(function(){
  that.loadOption(clusterValue, e)
 },300)
 
}

loadOption(clusterValue, keyWords){
  const { options } = this.props.data;  //獲得2k條數(shù)據(jù)
  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 100) break;
     }
    }     
   } 
  }

  // return newOptionsData
  this.setState({
   optionsData: newOptionsData
  })
}

• 在handleSearch函數(shù)添加定時(shí)是為了解決每次輸入都立刻請求,導(dǎo)致卡頓;用戶輸入完成后再統(tǒng)一查找,雖然會導(dǎo)致在搜索的時(shí)候增加300ms空白期,但是比用戶輸入卡頓要好
• 把渲染數(shù)量控制在100條內(nèi),防止卡頓,一般用戶查找一個(gè)數(shù)據(jù),也會輸入得比較完整,不可能會在100條內(nèi)查找。
• 區(qū)分初始化和搜索兩個(gè)不同情況,用戶剛進(jìn)入界面的時(shí)候,并沒有關(guān)鍵字搜索,所以這時(shí)候要初始化前100條內(nèi)容給用戶,當(dāng)然你也可以按照一定的條件渲染數(shù)據(jù)給用戶,只要保證合理數(shù)量以內(nèi)即可
• 因?yàn)槲业臄?shù)據(jù)是多級聯(lián)動的

options:{
'key': [xxx,xxx1,xxx2...],
'key1': [xxx,xxx1,xxx2...]
}

所以我的寫法是options[xxx],然后遍歷相應(yīng)的數(shù)組即可

當(dāng)然這僅僅是一種思路,更好的實(shí)現(xiàn)方法有很多！希望這能成為你的方法的一個(gè)墊腳石

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

《ant-design-pro》

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

問題1：滾動跟隨問題

問題描述：使用表單時(shí)，當(dāng)頁面過長出現(xiàn)滾動，select的下拉框不會跟隨輸入框，造成用戶體驗(yàn)性不好

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

問題2：可輸入過濾選項(xiàng)問題

問題描述：通過輸入過濾選項(xiàng)

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

問題3：動態(tài)加載

問題描述： 動態(tài)分頁加載option的選項(xiàng)，并且，滾動加載更多，可支持關(guān)鍵字搜索（由后端查詢數(shù)據(jù)庫放回?cái)?shù)據(jù)）
解決方法:：
1、當(dāng)搜索框聚焦時(shí)，獲取數(shù)據(jù)，如10條，關(guān)鍵字為空
2、將數(shù)據(jù)遍歷到option選項(xiàng)中
3、選項(xiàng)的滾動，當(dāng)滾動到底部時(shí)，加載下一頁的數(shù)據(jù)，在option中添加方法 onPopupScroll={this.scrollMore} scrollMore函數(shù)如下

scrollMore = (e) => {
 e.persist();
 if(this.state.scrollFlag){  //scrollFlag 節(jié)流閥，防止操作頻繁沒將數(shù)據(jù)完全加載
 const { target } = e;
 if ((target.scrollTop + target.offsetHeight) > (target.scrollHeight-25)) { //當(dāng)滾動到最底部25像素的時(shí)開始加載
  const { Params } = this.state;
  var pindex = Params.pageIndex +1;
  if(pindex <= this.state.pageEnd){ //判斷要查詢的頁是否已經(jīng)是最后一頁了
  this.setState({
   scrollFlag: false,
   Params:{...this.state.Params,pageIndex:pindex}
  },() => {
   this.getList();  //獲取option的數(shù)據(jù)
  })
  }
 }
 }
}

至此，滾動加載完成，要注意，在每次聚焦的時(shí)候，pageIndex都要先置為1，即從第一頁開始查詢，否則就是從先前滾動到的那一頁。在獲取到數(shù)據(jù)之后，即在getList函數(shù)內(nèi)，要對獲取到的數(shù)據(jù)進(jìn)行處理，要把獲取到的數(shù)據(jù)拼接在list后面，否則會造成加載更多時(shí)之前的數(shù)據(jù)不見了，并且，在pageIndex是1的時(shí)候不拼接，直接賦值。

4、在輸入值時(shí)會觸發(fā)option的onSearch事件，在函數(shù)里進(jìn)行查詢并重新復(fù)制list

此時(shí)，會發(fā)現(xiàn)一個(gè)問題，查詢后的值不會馬上出來，會等到下一次聚焦搜索框時(shí)才會出現(xiàn)。

解決方法：在option中加 filterOption={false}
這樣就實(shí)現(xiàn)了條件的過濾和關(guān)鍵字的過濾。

到此這篇關(guān)于深入理解Antd-Select組件的用法的文章就介紹到這了,更多相關(guān)Antd-Select組件內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！