正文

Antd-Select组件的深入用法

IP云
IP云V管理员/4 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、Antd-Select提供几种类型

  1. 最基础版只提供下拉功能的选择器

  2. 带搜索功能的下拉选择器

  3. 可多选的下拉选择器

  4. 可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)

  5. 多级联动下拉选择器

  6. 搜索远程数据下拉框

二、一些潜在用法

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

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

这下拉框加载了 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》

相关阅读

目录[+]