Antd下拉选择,自动匹配功能的实现


Posted in Javascript onOctober 24, 2020

我就废话不多说了,大家还是直接看代码吧~

Antd下拉选择,自动匹配功能的实现

<Select
 placeholder="客户名称"
 showSearch
 optionFilterProp="children"//自动匹配输入
 onChange={this.selectChange}
>
 {this.state.selectCustomer}
</Select>

补充知识:antd select如何支持既能输入不存在的选项又能进行下拉框选择

1.Select必须具备onSearch,onBlur,onChange这三个属性;

<Select
showSearch
value={this.state.value}
onSearch={…}
onBlur={…}
onChange={…}

{optionsFor}

2.在onSearch中使用回调,并设置

state {this.setState({ 'newState':val })}} onBlur={} onChange={...} > {optionsFor}

3.onChange设置回调

{this.setState({ 'newState':val })}} onBlur={} onChange={this.handleChange} > {optionsFor}

4.onBlur中利用三目判断,并返回输入的值

{this.setState({ 'newState':val })}} onBlur={()=>{ return this.state.newState?this.handleChange:null }} onChange={this.handleChange} > {optionsFor}

5.最后一步,也是最重要的,必须利用delete命令移除在state中设置的newState;

let finalState = this.state; delete newState['newState]; this.setState({finalState})

以上这篇Antd下拉选择,自动匹配功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 #Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 #Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 #Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 #Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 #Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
python实现同一局域网下传输图片
2020/03/20 Python
如何真正的了解python装饰器
2020/08/14 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
党员自我评议个人对照检查材料
2014/09/16 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
golang中的struct操作
2021/11/11 Golang
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python