Reactjs React-如何在回收合成事件之前触发preventDefault（）？

我在React组件中具有以下功能，该组件在单击链接时运行：

onClick(e, { name }) {
    e.stopPropagation();

    const doIt = await checkSomething();

    if (doIt) {
        e.preventDefault();
        doSomethingElse();
    }
}

---

问题是，当到达

e.preventDefault（）

时，合成事件被回收。那么，当需要一些逻辑来计算此决策时，在回收合成事件之前，如果单击了链接，我如何告诉浏览器不要跟随该链接？

要在事件上使用

preventDefault

，需要在回调函数返回之前执行。这不是异步任务完成后可以做的事情

如果你看，你会注意到它说你必须在事件流的某个地方调用它

在事件流的任何阶段调用preventDefault（）都会取消该事件，这意味着实现通常由于该事件而采取的任何默认操作都不会发生

您也可以参考此问题：。在上面的答案中，您将看到提到使用

await

以及

事件.preventDefault（）

需要如何在第一个

await

语句之前发生。这适用于使用承诺或任何异步操作

旁白：

如果希望以异步方式访问事件属性，则应该对事件调用event.persist（），这将从池中删除合成事件，并允许用户代码保留对事件的引用

---

以下是处理此问题的方法。

一种方法是使用

preventDefault

，当操作完成并且需要路由时，使用

history.push（）自己调用路由逻辑。

---

在

上检查这个答案，我只是在这里提出一个想法

如果您不能或不想以编程方式执行URL重定向，那么还有一种替代方法。
您只能在完成逻辑后嵌套一个函数（currying）并调用第二个函数。
注意这将要求您将嵌套函数编写为IIFE。

---

下面是一个使用JavaScript（开放控制台）的小型概念证明：

const el=document.getElementById（“链接”）；
函数onLinkClick（）{
log（'做一些事情..'）；
for（设i=0；i<500；i++）{
log（`doing more stuff${i}`）；
}
返回函数（e）{
//这将触发actuall事件（注意这是一个IIFE）
console.clear（）；
}();
}
el.addEventListener（'click'，onLinkClick）
#大{
最小高度：950px；
}

页面底部
您是否尝试过使用承诺和。然后（）

您应该能够控制preventDefault（）
 虽然可能有一种方法可以做到这一点，但我认为它相当粗糙，我会建议一些更具声明性和反应性的东西。该链路是普通链路还是反应路由器型链路
onClick(e, { name }) {
    e.stopPropagation();
    e.preventDefault();
    const doIt = await checkSomething();

    if (doIt) {
        doSomethingElse();
    } else {
        this.props.history.push('/pathToRoute');
    }
}

// Async/Await
const asyncGreeting = async () => 'Greetings';

// Promises
const promiseGreeting = () => new Promise(((resolve) => {
  resolve('Greetings');
}));

asyncGreeting().then(result => console.log(result));
promiseGreeting().then(result => console.log(result));