解决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 相关文章推荐
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
谈谈node.js中的模块系统
2020/09/01 Javascript
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
普天C++笔试题
2016/03/20 面试题
syb养殖创业计划书
2014/01/09 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
实习科室评语
2015/01/04 职场文书
接待员岗位职责
2015/02/13 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA