Skip to content
Menu
Yuuk的博客
  • 首页
  • 前端技术
    • JavaScript
    • HTML & CSS
  • SEO
  • 设计
    • 素材分享
    • 设计教程
  • 随笔
Yuuk的博客

react 中输入框输入时失去焦点

Posted on 2018年8月22日2018年8月22日 by yuuk

最近在开发一个自定义表单的项目,在开发过程中偶然发现了一个有趣的问题。当用户输入时,React 失去了输入框的焦点。

下面是这个问题的表现示例:

https://www.430115.com/wp-content/uploads/2018/08/1456ad5f551daef30fb0.mp4

可以看到,每次输入的时候都要点击一下输入框才能继续输入,即表示每次输入后输入框已经失去焦点了。

查阅相关资料后发现是因为 reactNode 的 key 设置不当引起的,开发过程中为了省事,直接生成 UUID 作为 reactNode 的 key 导致每次视图重新渲染之后都生成了一个新的reactNode,react 无法分辨新 reactNode 和旧 reactNode 之间的关系,所以引起失去焦点。

解决办法也很简单,最简单的办法就是将 key 设置为遍历时的索引值,但是这个办法也有弊端,可以查阅这篇文章了解详细。

还有一个办法就是在【添加选项】数据的时候伪造一个 ID,渲染的时候 key 设置为 ID,这样才是最好的办法。

本文参考自:http://reactkungfu.com/2015/09/react-js-loses-input-focus-on-typing/

打赏赞(1)分享

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

搜索

近期文章

  • 宝塔面板中使用docker部署nodejs应用
  • 如何将docker镜像上传到阿里云
  • React Native 报错 No bundle URL present 解决方法
  • axios 给每一个请求添加耗时统计
  • css filter属性导致fixed失效

标签

addEventListener ajax ajax跨域 chatAt css居中 DNS缓存 docker gulp ie7 json jsonp margin memcache mysql nodejs ps技巧 typescript void vpn vuejs wampserver webpack win10 XMLHttpRequest z-index 事件冒泡 事件绑定 内容发布时间 图片加载 大写 字符串 封装ajax 广告屏蔽 批量修改图层名称 水平垂直居中 注册码 特殊符号 百度 空元素 站长平台 网页快照 负边界 递减 随机数 首字母

友情链接

  • 蔡甸新闻网
©2025 Yuuk的博客 | 鄂ICP备13014750号-9