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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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
PHP中的日期处理方法集锦
2007/01/02 PHP
PHP 加密解密内部算法
2010/04/22 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
用javascript实现画板的代码
2007/09/05 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
js选项卡的实现方法
2015/02/09 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python实现图片筛选程序
2018/10/24 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python实现代码审查自动回复消息
2021/02/01 Python
决定成败的关键——创业计划书
2014/01/24 职场文书
给领导的检讨书
2014/02/16 职场文书
北京奥运会主题口号
2014/06/13 职场文书
加薪申请报告范本
2015/05/15 职场文书
青春雷锋观后感
2015/06/10 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js