解决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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
js改变Iframe中Src的方法
May 05 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
个人小程序接入支付解决方案
May 23 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
ES6中的类(Class)示例详解
Dec 09 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
PHP 时间日期操作实战
2011/08/26 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
php 浮点数比较方法详解
2017/05/05 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
深入解析contentWindow, contentDocument
2013/07/04 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
详解Python中的正则表达式的用法
2015/04/09 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python字符串string的内置方法实例详解
2018/05/14 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
Opencv求取连通区域重心实例
2020/06/04 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
自我评价格式
2014/01/06 职场文书
文化大革命观后感
2015/06/17 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL