React Input框输入一次就失焦

在React项目中遇到Input输入字符后立即失焦的bug,主要由两种情况引起:一是table的key值动态变化导致组件重新渲染;二是使用antd Table时,在render中动态定义components属性。解决方法分别是给予key固定值和避免重复定义components。
摘要由CSDN通过智能技术生成

最近解决项目的bug时,发现Input输入一个字符就失去焦点,以下是我遇到的两种情况的失焦问题,供参考

第一种情况:
页面中使用的是原生的table,给每个tr和td标签都添加了一个key值,问题就是这个key取的值是“日期+随机数”,导致页面每次重新渲染时,key值都会变化,就相当于渲染之后的table和之前的不是同一个了,所以导致Input框失焦。类似如下代码。(代码不全,仅供参考)
解决办法:给key赋一个固定的值

<table>
	<tr key={
   new Date()+Math.random()
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值