深入理解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 相关文章推荐
浅谈Node.js中的定时器
Jun 18 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
js数组去重的hash方法
Dec 22 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 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加密解密函数(动态加密)
2013/06/19 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
JS之小练习代码
2008/10/12 Javascript
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
python list格式数据excel导出方法
2018/10/31 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
村容村貌整治方案
2014/05/21 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫