antd的select组件使用心得

使用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}
这样就实现了条件的过滤和关键字的过滤。

来源：CSDN

作者：qq_44144735

链接：https://blog.csdn.net/qq_44144735/article/details/103731162

标签

select

option