解决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 相关文章推荐
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
JS实现鼠标按下拖拽效果
Jul 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
聊天室php&amp;mysql(一)
2006/10/09 PHP
附件名前加网站名
2008/03/23 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
PHP速成大法
2015/01/30 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python实现决策树分类算法
2017/12/21 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
python几种常用功能实现代码实例
2019/12/25 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
机电专业个人自荐信格式模板
2013/09/23 职场文书
北大自主招生自荐信
2013/10/19 职场文书
任命书怎么写
2014/06/04 职场文书
企业文化宣传标语
2014/06/09 职场文书
运动会广播稿100字
2014/09/14 职场文书
尼克胡哲观后感
2015/06/08 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript