解决ant Design Search无法输入内容的问题
更新时间：2020年10月29日 09:18:05 作者：smile&$
这篇文章主要介绍了解决ant Design Search无法输入内容的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
我的问题：今天先根据手机号查询一个用户，根据文档引用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>
效果图：鼠标点击白色输入框无法没有反应，无法输入内容，点击蓝色部分可以输入，但是这样的客户体验不好
解决办法：
在搜索框的前面添加一个东西，例如一个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>
)
效果：
补充知识：Antd form表单中input失效，无法输入字符串，只能输入单个字符
问题描述
删掉{getFieldDecorator(name, {})这一段 表框可以正常输入。
解决办法
检查form表单或者父节点是否使用了 key=Math.random() 之类给组件添加唯一值的代码。
以上这篇解决ant Design Search无法输入内容的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-router的安装不是理想化的,会出现问题,需要静下心认真研究,熬过去就会懂得更多,这篇文章主要给大家介绍了关于vue2安装vue-router报错的解决方法,需要的朋友可以参考下2022-03-03
vue+axios+element ui 实现全局loading加载示例
今天小编就为大家分享一篇vue+axios+element ui 实现全局loading加载示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue如何使用swiper插件修改左右箭头的默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天遇到一个bug,有一个Element的message组件,用它做的一个进度条,它是写在一个页面上,并且是用js控制dom元素的,web端一切正常,但是,H5页面刷新的时候它样式加载不出来了,所以本文主要介绍了Vue项目刷新后h5样式失效的原因及解决方案,需要的朋友可以参考下2024-10-10
最近工作遇到个需求,表单可以进行增加删除操作,需要进行表单校验,这篇文章主要给大家介绍了关于elementUI动态嵌套el-form表单校验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-06-06
本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
今天小编就为大家分享一篇vue 实现强制类型转换 数字类型转为字符串，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本篇文章主要介绍了vuex 闲置状态重置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了如何基于Vue实现我的钱包充值功能,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考一下2024-01-01
最新评论