深入理解Antd-Select组件的用法


Posted in Javascript onFebruary 25, 2020

一、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,xxx1,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组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JS出现失效的情况总结
Jan 20 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
京东优选小程序的实现代码示例
Feb 25 #Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 #Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 #Javascript
Javascript地址引用代码实例解析
Feb 25 #Javascript
Javascript如何实现双指控制图片功能
Feb 25 #Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 #Javascript
通过js实现压缩图片上传功能
Feb 25 #Javascript
You might like
php下MYSQL limit的优化
2008/01/10 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
Symfony查询方法实例小结
2017/06/28 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
教师旷工检讨书
2014/01/18 职场文书
采购助理岗位职责
2014/02/16 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
大学生活动总结模板
2014/07/02 职场文书
村委会贫困证明范文
2014/09/21 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python