深入理解Antd-Select組件的用法-創(chuàng)新互聯(lián)

一、Antd-Select提供幾種類型

從策劃到設(shè)計制作，每一步都追求做到細膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、國際域名空間、雅安服務器托管、網(wǎng)絡營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進步。

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

二、一些潛在用法

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

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

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

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

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

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

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

//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>

新聞名稱：深入理解Antd-Select組件的用法-創(chuàng)新互聯(lián)
鏈接地址：http://bm7419.com/article32/ihhsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站內(nèi)鏈、微信小程序、App開發(fā)、響應式網(wǎng)站、網(wǎng)頁設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容