Javascript 如何在React中执行时禁用单击事件？

我有一个屏幕

我希望在执行过程中禁用所有事件

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

---

可以这样做吗？

是的，当然可以添加一个带有css

指针事件的类。在整个表上设置它，它将禁用所有事件。只要在请求开始时添加它，在请求结束时删除它即可。您可以通过在您的状态中使用
boolean
变量
isLoading
或redux存储并基于此添加或删除
no click
类来实现这一点


。无需单击{
指针事件：无；
}
当某些标志（即加载）为真时，您可以在内容上使用经典加载覆盖框

另一种方法是在CSS中使用
指针事件：none
。使用相同的标志将类设置为内容块

下面是codesanbox中的一个工作示例：

以下是代码：

导出默认函数App（）{
常量[loadingState，setLoadingState]=useState（false）；
常量[pointerEvent，setPointerEvent]=useState（false）；
返回(
边栏
setLoadingState（真）}>
显示加载覆盖
setPointerEvent（真）}>
在css中设置指针事件
{加载状态&&}
);
}

.App{
字体系列：无衬线；
文本对齐：居中；
显示器：flex；
位置：绝对位置；
宽度：100%；
身高：100%；
}
.内容{
弹性：1；
位置：相对位置；
}
.装载覆盖层{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.4）；
z指数：1；
}
.content指针事件无{
指针事件：无；
}