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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
在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闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
非常实用的vue导航钩子
2017/03/20 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
实习生的自我评价
2014/01/08 职场文书
银行存款证明样本
2014/01/17 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
教师节倡议书2015
2015/04/27 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
团日活动总结格式
2015/05/11 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript