解决antDesignSearch无法输入内容的问题_antdmodal中的input输不了值 - CSDN文库

1星 61 浏览量更新于2023-03-03 评论收藏 56KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

解决解决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失效，无法输入字符串，只能输入单个字符失效，无法输入字符串，只能输入单个字符

问题描述问题描述

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论1

tjzrty

2021-11-29

什么玩意儿

weixin_38655484

粉丝: 4
资源: 909

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈