江西抚州建设网站,网页设计的目的是指设计者,电子商务网站源码下载,禁用wordpress默认编辑器一、Antd-Select提供几种类型 最基础版只提供下拉功能的选择器带搜索功能的下拉选择器可多选的下拉选择器可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)多级联动下拉选择器搜索远程数据下拉框二、一些潜在用法 如果Select.Option选项的数量特别大:2k、3k... 假… 一、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 }} showSearchonChange{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 i0;ilen;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 newOptionsDatathis.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》 转载于:https://www.cnblogs.com/soyxiaobi/p/9726838.html
