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 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
在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
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php注销代码(session注销)
2012/05/31 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
鼠标图片振动代码
2006/07/06 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python学习之编写查询ip程序
2016/02/27 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
审核会计岗位职责
2013/11/08 职场文书
小学生家长寄语
2014/04/02 职场文书
药店促销活动总结
2014/07/10 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
导游词300字
2015/02/13 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python