如何在没有jquery的情况下在react js中获取数据时禁用点击事件？答案

【问题标题】：How to disable click event while fetching the data in reactjs witout jquery?如何在没有jquery的情况下在react js中获取数据时禁用点击事件？
【发布时间】：2018-09-02 18:08:44
【问题描述】：

我在 redux 存储中有一个 isFetching 状态，在从后端获取数据时，isFetching 变为 true ，所以当 isFetching 标志为 true 时，我想禁用 all click events 而没有 jQuery。

我找到了一些答案（使用 jQuery 和 CSS），但它们与 DOM 中的特定元素相关。

我想禁用所有的点击事件。

【问题讨论】：

How to conditionally add attributes to React components?的可能重复
我认为，它不是重复的，问题是关于禁用点击事件
发布您正在使用的代码，以便我们查看哪些代码不适合您。
我不明白如何在反应中做到这一点？这就是我正在寻找的解决方案
你已经尝试了什么？向我们发布一些代码。

标签： javascript jquery reactjs ecmascript-6 redux

【解决方案1】：

根据 isFetching 的值，您可以禁用正在提交表单的按钮（<button disabled> or <input disabled>，并在提交处理程序中检查是否提交，以防由于点击输入字段而执行提交.

【讨论】：

如果我这样做，我必须检查每个元素的条件，这就是我在问题中提到的，可以禁用每个元素但是如果我有 30 个元素，我可以' t 检查每个元素，这就是为什么我正在寻找一种解决方案来禁用点击事件而不是禁用按钮或任何其他元素
然后你可以显示类似'fetching data'之类的消息而不是显示表单...

【解决方案2】：

我想到了一个办法。也许你可以尝试这样实现：

当isFetch为true时，使用全局元素（DIV）掩码，设置宽高为100%，然后设置背景色为透明，设置z-index大于当前元素界面，否则，z-index 小于当前界面中的元素。然后监听这个元素的点击事件。这样就可以屏蔽界面上的点击事件。当 isFetching 为 false 时，让 mask 消失。

在你的 React 组件中，

handleClick = (e) => {
  e.preventDefault();
  e.stopPropagation();
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 1000;
}

.mask.disappear {
  display: none;
}

<div>
    your element    
</div>

<div className={`mask ${isFetching ? '' : 'disappear'}`} onClick= 
{this.handleClick}></div>

【讨论】：

我认为这是一个非常好的主意，应该是公认的答案。最好的部分是您不需要包装每个接受用户输入的组件，但是您可以例如 decorate App 使用带有掩码的组件，然后忘记它...
我也同意你的想法，就是用蒙版来聚焦点击事件