今天在开发上,遇到了一个问题:
这次开发使用的是react,在组件里,有个file input元素,在组件componentDidMounted事件里,用addEventListener方法,给input元素绑定上了change事件。
在操作的时候,input元素的change事件,只执行了一次,第二次再加文件,就没有再次执行事件了。
问题的排查,先直接去看的事件方法,看看change里的那个方法是否发生了什么?第一次执行,一切都正常,第二次,change方法里,什么都没执行。排查得有点没有头绪。
后来进行搜索后,发现其他人有类似的问题,原因是input元素被替换调了,新的input元素没有绑定上事件,所以事件就不起作用了。
回到我遇到的问题上来,看代码
{ bo && <input type="file"> }
这个写法,由于bo值的变化,会使得input元素消失,又重新添加,每次新添加都是新元素。新的元素追加时,没有绑定事件,所以事件就没起作用了。
真正解决问题,应该追根溯源。
元素绑定事件,事件方法未执行,原因应该有以下几种情况:
- 事件未绑定到目标元素上
- 用户操作时,未操作到目标元素,例如点击时,由于元素遮挡等,实际上并未点击到目标元素上。
- 元素本身被新元素替换,要操作的元素,在操作的过程中,会被删除,然后再添加新的元素。 我所经历的就是这种情况。
排查问题,应该从根源上去排查问题,而不是盲目地一步步查找,在排查前,先思考,有哪些因素会引起这种问题,再从这些因素着手排查。