react使用useRef自动获取input焦点失败

记录一种情况：

这是一个简单的todos案例，在结构中用map函数将一个数组展示为一个列表结构。

 

 input输入框是列表中嵌套的一个元素，并且通过useRef给这个元素添加了ref属性，默认是隐藏的，只展示上面span的内容。需求是：双击span将span隐藏，展示input，input出现后就自动获取焦点。

这时，出现一个奇怪的现象，只有双击最后一个任务“下午学习”才会自动获取焦点，前两个都获取失败了。

 我猜是添加ref失败了，遍历数组的时候，只有最后一项成功的添加了ref属性，前面两个都添加失败了。

于是，我在添加ref的时候做了判断，判断当前用户双击的是哪个任务，获取到id，根据任务id，只给选中的任务添加ref属性。

 

 此时会报错，因为useEffect会在页面加载的时候执行，所以，在useEffect里面直接获取焦点会找不到ref元素。所以需要添加一个判断，ref实例有current属性时，才去获取焦点。

这样就没问题了，双击也可以获取到焦点了！