问题
小组小伙伴开发过程中，遇到遍历 input 渲染在页面，再通过input框操作修改数据的过程中，出现input失去焦点问题。
去帮忙排查问题的时候，起初分析是 onChange 方法的问题，因为项目里业务逻辑比较复杂，方法的转换有很多层级，从上到下一步步排查都没能找到原因。偶然间看到外层遍历的key值用的时间戳，再想到react的机制，便知道原因了
代码示例如下：
import React, { useState } from 'react';
import { Input } from 'antd';
const index = () => {
const [userArr, setUserArr] = useState<any[]>([
{ val:'你好你好1' },
{ val:'你好你好2' },
{ val:'你好你好3' },
]);
const fns = (index:number, e:any)=>{
const userArrR = JSON.parse(JSON.stringify(userArr));
userArrR[index].val = e.target.value;
setUserArr(userArrR);
}
return (
<div>
{
userArr.map((item, index)=>{
return (
<div key={ index + new Date().getTime() }>
<Input value={ item.val } onChange={ fns.bind(this, index) } />
</div>
)
})
}
</div>
);
}
export default index
可以看到key值使用了时间戳
key={ index + new Date().getTime() }
这个时候的key是会动态变化的，因为每次数据状态发生变化都会触发render 重写渲染，即视图重写渲染
解决办法：
将map遍历时绑定的key的值改为不是动态变化的值(例如index 每一项的索引值，或给每一项设置一个固定的key或id)
原因：
在react中，每一次输入都会触发onChange事件都会重新调用render()，所以每一个item都需要一个唯一的确定的key值，这个key的作用就是避免diff算法重新生成一个全新的dom，所以每当绑定的key变化时diff算法就会生成一个全新的dom，进而导致每次输入都会导致input会失去焦点。
