解决antd/antd-mobile等input输入后自动失焦的问题

最新推荐文章于 2023-10-18 17:30:03 发布
最新推荐文章于 2023-10-18 17:30:03 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： 网站建设 文章标签： 前端 react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leisurefavor/article/details/122258947
版权

这个问题主要发生在render该组件时存在 if 判断 或者switch 判断的情况下，数据变更后引起组件重新render，导致input也被重新渲染，肯定会自动失焦，解决办法也很简单，把input部分抽离出来单独封装成一个小组件，组件内部数据变动不引发外部父组件重新render，就可以解决自动失焦的问题

祝鸭子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ant.design的input框同时绑定onBlur和onPressEnter事件且方法为同一个方法后的结果
sx_lz_1119的博客
08-03 3113
ant.design的input框同时绑定onBlur和onPressEnter事件且方法为同一个方法
react antd table中的Input每次输入都失去焦点 另一种导致问题的原因
chirpmonster的博客
12-15 4504
这是另外两片文章中的导致的原因 解决antd+react的Input组件每次输入都失去焦点 CSDN antd table input 失焦的问题 上传不了视频，找了一张问题相同的图。 出问题的状态： 正常情况： 问题原因 <Table className='rewrite-edit-table' columns={this.columns} dataSource={this.statedataSource} pagination={false}/&g
React input 获得焦点/失去焦点判断
热门推荐
Jane_96的博客
08-30 3万+
{/*render中写方法*/} inputOnBlur = ()=&gt;{ this.setState({ isShowCheckBox:false }) } inputOnFocus = ()=&gt; { this.setState({ isShowCheckBox:true }) } {/*return中组件内容*...
Antd Input框失去焦点问题
fuakdjjdjd的博客
07-14 3127
最近用到antd表格，想根据columns里render的值，来判断要展示的内容(代码如下) modifyData1是动态生成数组对象集合（代码如下） 本人用的Hooks，setSelectGoodsData是上面自己定义用来更新状态的 结果发现在前端输入框输入第一个值的时候会直接失去焦点，在网上查找发现原因如下 setSelectGoodsData 重新render了, 而render函数中某个地方存在if else类似的判断，重新计算了if else 产生了新的内容， 改变了组件，导..
解决antdv 中input每输入一个字符就失去焦点
m0_53383900的博客
10-21 2787
解决antdv 中input每输入一个字符就失去焦点
antd-pro-demo
05-13
:gem_stone: 整洁的设计：遵循蚂蚁设计规范 :triangular_ruler: 通用模板：企业应用程序的典型模板 :rocket: 最先进的开发：React / dva / antd的最新开发堆栈 :mobile_phone: 响应式：专为各种屏幕尺寸而设计 :...
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
input type=”text” maxlength=”11″ placeholder=”请输入联系人电话” v-model=”form.phone” /> 这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ...
smart:react-antd管理系统
04-29
English | 蚂蚁设计专业版 适用于企业应用程序的即用型UI解决方案，作为React样板。 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： ... :input_numbers: 模拟开发：易于使用
输入编号：React输入编号
02-05
import InputNumber from 'rc-input-number' ; export default ( ) => < InputNumber xss=removed> ; 发展历程 npm install npm start 例 在线示例： ： API 道具 名称 类型 默认 描述 前缀Cls 串 rc输入编号 ...
mobileUpLoadImage:移动端图片上传并处理
05-10
直接上传图片（由于移动端照出来的图片会比较大，这种方式上传的图片没有经过压缩，上传时间比较长且有可能失败）直接通过某些兼容移动端的插件进行上传通过URL.createObjectURL的方式读取图片并处理后上传base64...
form表单中的onblur事件
12-08
onblur事件，鼠标离开表单input框时触发的事件
antd table input 失焦的问题
LanJu的博客
05-13 1866
背景 隔壁 zym 同事遇到了一个问题，在编辑表格时，每输入一个字符后都会失去焦点，需要重新点击聚焦后才能继续输入，如图：![47d1b5ab-38d7-4996-9168-d910423d096e.gif](https://img-blog.csdnimg.cn/img_convert/133b0bbf03b720c9958d4d6e6cab1f2c.gif#clientId=uba010fd1-f904-4&from=ui&height=390&id=u838d75d9&amp.
input blur事件与click事件冲突
越努力,越幸运~~
05-26 1545
今天在写一个输入框的联想搜索功能,像下面这样 为了让交互更流畅,做了一个处理,当输入框聚焦的时候,才出下面的联想列表,失焦的时候隐藏,点击列表的时候,列表项回填到输入框里面,方案很完美。但是有一个问题，点击列表的时候,也触发了input的blur事件,而且blur事件还先执行,由于javascript是单线程的,事件得按顺序执行,这样轮到click事件执行的时候,列表已经隐藏了,这样就无法点击了,内容也就无法回填了。 两种解决办法 1 用mousedown去替代cl...
解决antd+react的Input组件每次输入都失去焦点
谦与谦寻的神隐
05-19 1万+
这是一个很容易遇见的问题，每输入一个字符Input的焦点就没了，本文将就此问题做分析和介绍一种解决方法。 出现的原因可能是你在组件的render函数中用了通过函数生成的Input组件，具体请看分析。 如果你遇见该种问题时并没有使用函数式组件，请告知，并一起思考解决方案。 本文涉及的现象及常见的原因 一般情况下在react框架下使用Input组件时，不管是跟着教程或者是网络搜索的用法，常见如下： export default class Test extends Component { onChang.
React Input框输入一次就失焦
qq_50825973的博客
06-01 3042
最近解决项目的bug时，发现Input输入一个字符就失去焦点,以下是我遇到的两种情况的失焦问题，供参考​ 第一种情况：页面中使用的是原生的table，给每个tr和td标签都添加了一个key值，问题就是这个key取的值是“日期+随机数”，导致页面每次重新渲染时，key值都会变化，就相当于渲染之后的table和之前的不是同一个了，所以导致Input框失焦。类似如下代码。(代码不全，仅供参考)解决办法：给key赋一个固定的值 <table> <tr key={new Date()+Math.r
react Input组件输入字符串，失去焦点，需要重新点击获取焦点
weixin_48496520的博客
08-12 2090
出错的伪代码如下： import { Input } from 'antd' ... let arr = [1, 2, 3, 4] ... return ( <div> { arr.map((item) => { return ( <Input key={Math.random()} onChange={(value)=>{ console.log(value
解决elementUI input组件只能输入一个文字，然后自动失去焦点的问题
最新发布
.伊泽瑞尔
10-18 1646
解决elementUI input组件在使用过程中一次只能输入一次文字，然后就会自动失去焦点的问题
react+antd开发中input框每输入一个字符就失去焦点
weixin_42436131的博客
12-10 8572
react+antd开发中input框每输入一个字符就失去焦点1.问题出现2.解决过程 1.问题出现 我需要做一个功能，就是在一个点击显示的气泡框上，有一个输入框，输入数量后点击确定完成添加，效果图大概是这样的 由于整体开发用了react+antd，所以我用了antd的一个Popconfirm气泡确认框，并且把红框圈住的地方抽离出来，代码大致如下： // 增加商品数量的Popconfirm的ti...
Vue使用antd中input组件去验证输入框输入内容
Free雅轩的博客
07-11 3492
效果图示例代码 < a-form-model-item prop="phone"> < a-input v-model="form.phone" :maxLength="11" placeholder="手机号" /> < /a-form-model-item> < a-form-model-item prop="code"> < a-input
antd-mobile设置input组件大小
06-01
要设置antd-mobile中的Input组件的大小，可以通过CSS来实现。以下是一个示例代码，可以将Input组件的高度设置为40px，宽度设置为100%： ```css .am-input { height: 40px; width: 100%; } ``` 你可以将这个CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值