React中blur事件触发重渲染后点击事件丢失问题

你对问题的原因判断完全正确。浏览器原生事件的触发顺序是mousedown → 失焦元素的blur → 新聚焦元素的focus → mouseup → click。你在blur回调里通过修改key强制重渲染整个模块，原有DOM节点会被全部销毁替换，后续的click事件只会作用在新渲染出来的按钮上，自然触发不到旧节点绑定的click回调。

可行解决方案 #

• 方案1：延迟执行blur的刷新逻辑
  给blur事件的回调加50-100ms的短延时，用setTimeout包裹你的刷新逻辑，让click事件先执行完成再触发重渲染。需要注意在输入框重新focus或者组件卸载时清除该定时器，避免非预期的执行。
• 方案2：替换按钮的监听事件
  把按钮原本绑定的click事件改为mousedown事件，mousedown的触发时机早于blur，此时原按钮节点还未被销毁，回调逻辑可以正常执行，后续blur触发的重渲染不会影响已经完成的操作。
• 方案3：优化重渲染逻辑
  非必要场景不要用修改key的方式强制刷新整个模块，改为只更新需要变动的状态，保留原有DOM节点，按钮的click事件就能正常触发。如果确实需要全量重置模块，可以把按钮点击的状态暂存在模块外部（比如上层组件状态、全局状态管理库），重渲染完成后读取外部状态执行对应的展示逻辑即可。

内容的提问来源于stack exchange，提问作者Masterlud