深入理解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扩展自写的 UI导航
Jan 13 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
javascript if条件判断方法小结
May 17 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
详解JavaScript中分解数字的三种方法
Jan 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
页面乱码问题的根源及其分析
2013/08/09 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
Python字符串处理实现单词反转
2017/06/14 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
python logging日志模块原理及操作解析
2019/10/12 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python flask搭建web应用教程
2019/11/19 Python
Python如何存储数据到json文件
2020/03/09 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
个人素质的自我评价分享
2013/12/16 职场文书
医药销售求职信范文
2014/02/01 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL