深入理解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 EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
Json解析的方法小结
Jun 22 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
vue.js实例todoList项目
Jul 07 Javascript
浅谈React中组件间抽象
Jan 27 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数据库的一个类
2012/04/21 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
Django rest framework基本介绍与代码示例
2018/01/26 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
党校培训思想汇报
2013/12/30 职场文书
村创先争优活动总结
2014/08/28 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书