一、Antd-Select提供幾種類型

最基礎(chǔ)版只提供下拉功能的選擇器

帶搜索功能的下拉選擇器

可多選的下拉選擇器

可搜索、可多選、可隨意輸入內(nèi)容的tag下拉選擇器(支持自動(dòng)分詞)

多級(jí)聯(lián)動(dòng)下拉選擇器

搜索遠(yuǎn)程數(shù)據(jù)下拉框

二、一些潛在用法

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

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

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

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

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

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

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

//render const { optionsData } = this.state;<Select style={{ width: 200 }} showSearchonChange={this.handleSecChange}placeholder="請(qǐng)輸入/選擇xxx" onSearch={this.handleSerach} > {optionsData.length && optionsData.map( (item, index) => (<Select.Option key={index} value={item}>{item}</Select.Option>)) } </Select> //搜索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<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 newOptionsDatathis.setState({optionsData: newOptionsData}) }

• 在handleSearch函數(shù)添加定時(shí)是為了解決每次輸入都立刻請(qǐng)求,導(dǎo)致卡頓;用戶輸入完成后再統(tǒng)一查找,雖然會(huì)導(dǎo)致在搜索的時(shí)候增加300ms空白期,但是比用戶輸入卡頓要好
• 把渲染數(shù)量控制在100條內(nèi),防止卡頓,一般用戶查找一個(gè)數(shù)據(jù),也會(huì)輸入得比較完整,不可能會(huì)在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ù)是多級(jí)聯(lián)動(dòng)的

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》

轉(zhuǎn)載于:https://www.cnblogs.com/soyxiaobi/p/9726838.html

總結(jié)

以上是生活随笔為你收集整理的Antd-Select组件的深入用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。