1. 引入组件

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

2. 配置Select 选择器

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

<SelectshowSearch   //提供输入搜索功能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) => {...//调用接口前清空数据, 出现加载iconthis.setState({dataList: [],spinState: true})//请求后端搜索接口axios('http://xxx.com/xxx', {value,}).then(data){this.setState({dataList: data,spinState: false})}...
}

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

vue+element实现Select 选择器的远程搜索、滚动加载
1.html结构: <el-selectv-model.trim="query.enEnterpriseBaseId"v-loadmore="loadMore&qu ...
ant-design-vue select 可搜索下拉加载更多
1.搜索配置 showSearch 属性,支持单选模式可搜索. filterOption 是否根据输入项进行筛选. 当其为一个函数时,会接收 inputValue option 两个参数,当 opt ...
android调用h5预加载图片,使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度...
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...
React Native 实现FlatList的下拉刷新上拉加载
RN对列表已经实现了下拉刷新与上拉加载的功能,但是为了更好用,做了封装. 实现的功能: 1.下拉刷新,使用原生下拉头. 2.上拉加载,自定义加载布局. 3.处理了重复刷新或重复 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
虚拟机Virtualbox中的Ubuntu系统，安装增强功能时报错：未能加载虚拟光驱VBoxsGuestAdditions.iso到虚拟电脑
虚拟机Virtualbox中的Ubuntu系统,安装增强功能时报错:未能加载虚拟光驱VBoxsGuestAdditions.iso到虚拟电脑在virtualbox中装ubuntu虚拟机,但是分辨率太 ...
海康工业相机功能模块-参数保存、加载、批量复制参数
海康工业相机功能模块-参数保存与加载前言相机参数保存的快速方法相机参数导入导出的操作方法 UserSetLoad 加载相机内部参数 FeatureLoad/FeatureSave FileAcc ...
【Youtobe trydjango】Django2.2教程和React实战系列八【渲染数据库数据与模板加载顺序探究】
[Youtobe trydjango]Django2.2教程和React实战系列八[渲染数据库数据与模板加载顺序探究] 1. 准备数据 2. 渲染数据库数据到模板 3. 如何在app里加载django ...
vue + iview + select + 本地搜索或远程搜索
案例 <template><div><!-- filterable.remote.remote-method.loading.l ...
xilinx FPGA的远程更新（动态加载）详解（Using a Microprocessor to Configure 7 Series FPGAs）
目录 1 概述 2 参考文件 3 远程更新思路 4 MIC配置FPGA的模式 4.1 slave serial mode情况 4.2 slave selectMAP mode情况 5 FPGA配置时序 ...

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

1. 引入组件

2. 配置Select 选择器

3. 相关实现函数

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

最新文章

热门文章

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

1. 引入组件

2. 配置Select 选择器

3. 相关实现函数

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

最新文章

热门文章

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

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