React - 如何在合成事件回收之前触发preventDefault()？

Question

我在 React 组件中有以下函数，该函数在单击链接时运行：

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

    const doIt = await checkSomething();

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

问题是，到了时间，e.preventDefault()合成事件就被回收了。那么，当需要一些逻辑来计算此决定时以及在回收合成事件之前，如何告诉浏览器在点击链接时不要点击该链接？

Answer 1

preventDefault要在事件上使用，您需要在回调函数返回之前执行此操作。这不是异步任务完成后可以做的事情。

如果您查看MDN Event.preventDefault Notes，您会注意到它说您必须在事件流中的某个位置调用它。

在事件流的任何阶段调用 PreventDefault() 都会取消该事件，这意味着实现通常因该事件而采取的任何默认操作都不会发生。

您还可以参考这个SO问题：event.preventDefault in async Functions 。在最上面的答案中，您将看到在第一个语句之前提到了 的使用await以及如何event.preventDefault()需要发生await。这对于使用 Promise 或任何异步操作都是如此。

作为旁白：

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

这是SyntheticEvent 文档。