解决ant Design Search无法输入内容的问题


Posted in Javascript onOctober 29, 2020

我的问题:今天先根据手机号查询一个用户,根据文档引用Input中的Search,我添加了一个样式,发现输入框无法输入内容,

代码:

return (
   <div>    
     <Search
     style={{ width: 300, float: "right" }}
     placeholder="手机号"
     onSearch={value => this.findAppUserByPhoneNo(value)}
     onChange={this.onChangePhoneNo}
     value={searchText}
     enterButton
    />
    <Table .../>
    <Pagination .../>
</div>

效果图:鼠标点击白色输入框无法没有反应,无法输入内容,点击蓝色部分可以输入,但是这样的客户体验不好

解决ant Design Search无法输入内容的问题

解决办法:

在搜索框的前面添加一个东西,例如一个button或者span标签;个人觉得原因是:是受float:"right"影响 ,大家有不同意见的告诉我!

render(
  <div>
    <Button type="primary" onClick={this.userFilter}>
     全部用户
    </Button>
    <span style={{ marginLeft: 20, color: "#1890FF" }}>总人数:{total}</span>
         <Search
     style={{ width: 300, float: "right" }}
     placeholder="手机号"
     onSearch={value => this.findAppUserByPhoneNo(value)}
     onChange={this.onChangePhoneNo}
     value={searchText}
     enterButton
    />
    <Table .../>
    <Pagination .../>
  </div>
)

效果:

解决ant Design Search无法输入内容的问题

补充知识:Antd form表单中input失效,无法输入字符串,只能输入单个字符

问题描述

删掉{getFieldDecorator(name, {})这一段 表框可以正常输入。

解决办法

检查form表单或者父节点是否使用了 key=Math.random() 之类给组件添加唯一值的代码。

以上这篇解决ant Design Search无法输入内容的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
关于vue-router的那些事儿
May 23 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
js实现随机圆与矩形功能
Oct 29 #Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 #Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 #Javascript
design vue 表格开启列排序的操作
Oct 28 #Javascript
ant design vue导航菜单与路由配置操作
Oct 28 #Javascript
JS实现多功能计算器
Oct 28 #Javascript
JS实现简单贪吃蛇小游戏
Oct 28 #Javascript
You might like
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
大学生毕业的自我鉴定
2013/11/13 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS