react e.stopPropagation() 前调用 await 耗时操作 的坑

代码如下

<div
  onClick={e=>{
    e.stopPropagation();

  }}
/>


这样是能阻止冒泡的 ,e.stopPropagation(); 能正常 执行

但是下面 这样写 是不行的

<div
  onClick={async (e)=>{

  let res = await xxx(); //处理耗时操作
  if (res.success){
    e.stopPropagation(); // 这个永远都不会走 ,并且不会组织事件冒泡 
  }
  }}
/>

原因

preventDefault 需要同步调用才能产生任何效果。即使没有 React 也是如此。这是浏览器/DOM 级别的行为。

事件系统是同步的,preventDefault必须同步调用,即使在 React 之外。

参考来源 https://github.com/facebook/react/issues/9319

posted @ 2022-10-08 21:09  ifnk  阅读(60)  评论(0编辑  收藏  举报