深入理解Antd-Select组件的用法-创新互联

一、Antd-Select提供几种类型

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供做网站、成都网站制作、网站策划、网页设计、国际域名空间、雅安服务器托管、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

• 最基础版只提供下拉功能的选择器
• 带搜索功能的下拉选择器
• 可多选的下拉选择器
• 可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)
• 多级联动下拉选择器
• 搜索远程数据下拉框

二、一些潜在用法

如果Select.Option选项的数量特别大:2k、3k...

假设请求数据时间我们都解决好了,信心满满地准备把数据填充到后下班!过会你会发现有多绝望..

这下拉框加载了10s还没出来！?这时候先想着去antd文档上找解决方法,无果后百度、SF、google....因为antd每次都会重新渲染,所以要降低卡顿时间,唯一办法就是减少渲染的数量

可以来体验一下:《antd-Select加载2k条数据演示》

发现问的人倒挺多,真正解决的回答没见到几个(我还没找到..)
有的劝着放弃吧,加了那么多用户也不会看(确实如此),改做成一个搜索下拉框.稍微执拗一点的继续挣扎,终于找到了一个能优化加载速度的插件《react-select-fast-filter-options》
然后过会又发现,搜索功能肯定也需要的呀!总不能让用户翻那2000条数据.不然可能半夜还在被投诉.

带着最后一点希望,找了一下github上antd的Issues,里面给的回答倒是挺有启发的,但是还是没有正确的解决办法.《ant-design:Issues》

于是就自己设计了一个,新手代码请见谅,希望对你有帮助.

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


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

分享文章：深入理解Antd-Select组件的用法-创新互联
本文地址：http://cdxtjz.cn/article/ihhsc.html