React antD 使用Select 进阶功能远程搜索，防抖控制，加载状态

最新推荐文章于 2024-07-26 16:43:57 发布

hero_th

最新推荐文章于 2024-07-26 16:43:57 发布

阅读量5.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 # React 文章标签： antD Select

本文链接：https://blog.csdn.net/weixin_45774972/article/details/118710789

前端同时被 2 个专栏收录

63 篇文章

订阅专栏

React

17 篇文章

订阅专栏

1. 引入组件

import { Select, Spin } from 'antd'; //引入选择器
import debounce from 'lodash/debounce'; //函数防抖
const { Option } = Select;

2. 配置Select 选择器

一些属性就不在这一一介绍了，关键的属性在旁边写好了注释，是必须要加上的。想了解更多属性的，可以自行在官网查询.
antd已经给我们封装好了加载状态的组件:<Spin /> .然后通过state控制其出现和消失.

<Select
	showSearch   //提供输入搜索功能
	placeholder="请输入"
	filterOption={false}    //关闭自动筛选
	optionFilterProp="label"
	defaultActiveFirstOption={false}
	notFoundContent={spinState ? <Spin size="small"/> : null}
	onSearch={this.handleSearch}	//文本框值变化时回调
	onSelect={this.handleSelect}   //被选中时的回调
	style={{
	  width: '60%',
	}}>
	{
	  dataList.map((item, index) => (
	  <Option key={item.id} value={item.id}>{item.name}</Option>
	    ))
	}
</Select>

3. 相关实现函数

//被选中时的回调
handleSelect = (value)=>{
    console.log(value);
   	...
}
//文本框值变化时回调
handleSearch = (value) => {
    ...
    //调用接口前清空数据, 出现加载icon
    this.setState({
        dataList: [],
        spinState: true
    })
    
    //请求后端搜索接口
    axios('http://xxx.com/xxx', {
        value,
    }).then(data){
        this.setState({
            dataList: data,
            spinState: false
        })
    }
    ...
}