一、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》
于是就自己设计了一个,新手代码请见谅,希望对你有帮助.
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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>
|
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
handleSerach(e){
let { clusterValue } = this.state;
let that = this;
setTimeout(function(){
that.loadOption(clusterValue, e)
},300)
}
loadOption(clusterValue, keyWords){
const { options } = this.props.data;
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;
}
}
}
}
this.setState({
optionsData: newOptionsData
})
}
|
-
在handleSearch函数添加定时是为了解决每次输入都立刻请求,导致卡顿;用户输入完成后再统一查找,虽然会导致在搜索的时候增加300ms空白期,但是比用户输入卡顿要好
-
把渲染数量控制在100条内,防止卡顿,一般用户查找一个数据,也会输入得比较完整,不可能会在100条内查找。
-
区分初始化和搜索两个不同情况,用户刚进入界面的时候,并没有关键字搜索,所以这时候要初始化前100条内容给用户,当然你也可以按照一定的条件渲染数据给用户,只要保证合理数量以内即可
-
因为我的数据是多级联动的
?
|
1
2
3
4
|
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函数如下
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
scrollMore = (e) => {
e.persist();
if(this.state.scrollFlag){
const { target } = e;
if ((target.scrollTop + target.offsetHeight) > (target.scrollHeight-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();
})
}
}
}
}
|
至此，滚动加载完成，要注意，在每次聚焦的时候，pageIndex都要先置为1，即从第一页开始查询，否则就是从先前滚动到的那一页。在获取到数据之后，即在getList函数内，要对获取到的数据进行处理，要把获取到的数据拼接在list后面，否则会造成加载更多时之前的数据不见了，并且，在pageIndex是1的时候不拼接，直接赋值。
4、在输入值时会触发option的onSearch事件，在函数里进行查询并重新复制list
此时，会发现一个问题，查询后的值不会马上出来，会等到下一次聚焦搜索框时才会出现。
解决方法：在option中加 filterOption={false}
这样就实现了条件的过滤和关键字的过滤。
