Antd Input框失去焦点问题

最新推荐文章于 2023-06-20 10:11:59 发布
最新推荐文章于 2023-06-20 10:11:59 发布
阅读量3.1k 收藏
点赞数
分类专栏： react+antd 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuakdjjdjd/article/details/118734650
版权

最近用到antd表格，想根据columns里render的值，来判断要展示的内容(代码如下)

 modifyData1是动态生成数组对象集合（代码如下）

 本人用的Hooks，setSelectGoodsData是上面自己定义用来更新状态的

结果发现在前端输入框输入第一个值的时候会直接失去焦点，在网上查找发现原因如下

setSelectGoodsData 重新render了, 而render函数中某个地方存在if else类似的判断，重新计算了if else 产生了新的内容， 改变了组件，导致失去焦点

但是这一块的逻辑又必不可少，现在不知道怎么处理

fuakdjjdjd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React Input框输入一次就失焦
qq_50825973的博客
06-01 3069
最近解决项目的bug时，发现Input输入一个字符就失去焦点,以下是我遇到的两种情况的失焦问题，供参考​ 第一种情况：页面中使用的是原生的table，给每个tr和td标签都添加了一个key值，问题就是这个key取的值是“日期+随机数”，导致页面每次重新渲染时，key值都会变化，就相当于渲染之后的table和之前的不是同一个了，所以导致Input框失焦。类似如下代码。(代码不全，仅供参考)解决办法：给key赋一个固定的值 <table> <tr key={new Date()+Math.r
antd table input 失焦的问题
LanJu的博客
05-13 1887
背景 隔壁 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.
解决antd+react的Input组件每次输入都失去焦点
热门推荐
谦与谦寻的神隐
05-19 1万+
这是一个很容易遇见的问题，每输入一个字符Input的焦点就没了，本文将就此问题做分析和介绍一种解决方法。 出现的原因可能是你在组件的render函数中用了通过函数生成的Input组件，具体请看分析。 如果你遇见该种问题时并没有使用函数式组件，请告知，并一起思考解决方案。 本文涉及的现象及常见的原因 一般情况下在react框架下使用Input组件时，不管是跟着教程或者是网络搜索的用法，常见如下： export default class Test extends Component { onChang.
【踩坑日记】解决antd vue input每输入一个字符就失去焦点
LadenxxxxD
03-26 4536
今天接到一个bug修复的需求，用户反馈某个input框每次只能输一个字符，然后就失去焦点。记录一下供大家参考。 结论 检查v-for的key是否是可改变的，并且该key值与你所输入的控件绑定或会被该控件间接影响。 思路 这种情况首先考虑是组件变化重新渲染的问题。 验证方法是F12打开控制栏，选中input组件，此时观察输入字符时出现以下这种闪烁的情况就可以确定了。 检查key值，果然： ...
antd的Table组件中使用Input组件框输入时会失焦
weixin_65494806的博客
05-02 1630
antd组件库的Table组件中使用Input组件输入时会造成失焦
antd vue input在vue中的自动获取焦点失效问题
m0_51467729的博客
06-20 488
今天在项目中碰到有多个input的情况, 切换自动获取焦点的失效的问题, 看了文档也没有相关属性, 通过控制台发现其实是有的, 正确写法应该是auto-focus。
react antd table中的Input每次输入都失去焦点 另一种导致问题的原因
chirpmonster的博客
12-15 4565
这是另外两片文章中的导致的原因 解决antd+react的Input组件每次输入都失去焦点 CSDN antd table input 失焦的问题 上传不了视频，找了一张问题相同的图。 出问题的状态： 正常情况： 问题原因 <Table className='rewrite-edit-table' columns={this.columns} dataSource={this.statedataSource} pagination={false}/&g
解决antd/antd-mobile等input输入后自动失焦的问题
leisurefavor的专栏
12-31 2372
这个问题主要发生在render该组件时存在 if 判断 或者switch 判断的情况下，数据变更后引起组件重新render，导致input也被重新渲染，肯定会自动失焦，解决办法也很简单，把input部分抽离出来单独封装成一个小组件，组件内部数据变动不引发外部父组件重新render，就可以解决自动失焦的问题 ...
react Input组件输入字符串，失去焦点，需要重新点击获取焦点
weixin_48496520的博客
08-12 2096
出错的伪代码如下： 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
react+antd开发中input框每输入一个字符就失去焦点
weixin_42436131的博客
12-10 8635
react+antd开发中input框每输入一个字符就失去焦点1.问题出现2.解决过程 1.问题出现 我需要做一个功能，就是在一个点击显示的气泡框上，有一个输入框，输入数量后点击确定完成添加，效果图大概是这样的 由于整体开发用了react+antd，所以我用了antd的一个Popconfirm气泡确认框，并且把红框圈住的地方抽离出来，代码大致如下： // 增加商品数量的Popconfirm的ti...
antd-input-tag.zip
06-25
"antd-input-tag"是一个Antd中的组件，专门用于将用户在input框中输入的内容转化为可操作的tags，这种功能常见于标签管理系统或者输入筛选条件的场景。 Antd Input Tag组件的核心功能是将用户的连续输入截断成单独...
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
Angular限制input框输入金额（是小数的话只保留两位小数点）
01-19
checkInput: function (event) { var id = event.target.getAttribute(“id”);//获取input的id var reg = /^[-?\d]+(.)?(\d{1,2})?/;//匹配正则while(!reg.test(('#' + id).val()) && (‘#' + id).val() != “”) {...
antd 开发框架包
10-19
antd 开发框架包 1组件化&;antd将UI分成不同的组件,每个组件都独立封装缺陷下面这些都没有:事件系统(除了原生的DOM事件)AJAX功能数据层Promises应用程序架构单单reactjs的代码压缩后也需要147k以上reactjs代码量最多...
解决antdv 中input每输入一个字符就失去焦点
m0_53383900的博客
10-21 2870
解决antdv 中input每输入一个字符就失去焦点
input标签点击时不出现光标
男孩和树和你
03-28 4368
<input id="markArea" class="tabInput" type="text" value="" readonly="readonly" unselectable="on"/>
【踩坑记】从“输入框自动失去焦点”到“React状态的保留与重置”
weixin_44545357的博客
05-19 917
近期解决了一个项目中react状态更新相关的小bug，简单记录一下问题出现的原因及解决方案。或许你能从中更深入地了解React状态的保留与重置~
react中 input自动失去焦点解决办法和原因
GMLGDJ的博客
01-30 7788
react中 input自动失去焦点解决办法和原因 react 更新state时input失去焦点
antd input失去焦点事件
最新发布
08-11
引用引用引用和引用的内容，antd的Input组件在输入过程中会出现失去焦点事件的问题。解决这个问题的一种方法是避免在输入过程中触发render，可以在输入结束后手动点击按钮或者等待组件失去焦点。另外，根据引用，如果在使用Table组件的时候将columns中的某个key命名为"key"，可能会导致Input组件失去焦点的问题。解决办法是将key修改为其他名称，以避免与diff算法发生冲突。因此，可以结合以上方法来解决antd Input失去焦点事件的问题。123 #### 引用[.reference_title] - *1* *3* [解决antd+react的Input组件每次输入都失去焦点](https://blog.csdn.net/ZxqSoftWare/article/details/106217091)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [react antd table中的Input每次输入都失去焦点 另一种导致问题的原因](https://blog.csdn.net/chirpmonster/article/details/121770808)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值