[JavaScript知识库]React antD 使用Select 进阶功能 远程搜索，防抖控制，加载状态

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
        })
    }
    ...
}