如何在 React 执行时禁用点击事件？

Question

我有一个屏幕

我想在执行过程中禁用所有事件。

当我单击“执行”按钮时，将调用一个 API，该 API 可能需要 4-5 分钟才能响应。在此期间，我不希望用户单击日历单元格或月份导航箭头。 简而言之，我想禁用中央屏幕上的所有事件，但不禁用左侧菜单。

可以这样做吗？

Answer 1

是的，当然，您可以添加带有 css 规则的类pointer-events。将其设置在整个桌子上，它将禁用所有事件。只需在请求开始时添加它，并在请求结束时删除它。您可以通过在状态或 redux 存储中添加一个boolean变量isLoading并基于该变量添加或删除no-click类来实现这一点。

.no-click {
  pointer-events: none;
}