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

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

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

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

查阅相关资料后发现是因为 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/

打赏支持

如果文章对你有帮助就打个赏吧~

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

评论

还没有任何评论,你来说两句吧

发表评论

Powered By Yuuk