如何在没有 jquery 的 reactjs 中获取数据时禁用点击事件？

Question

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

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

我想禁用所有点击事件。

Answer 1

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

Answer 2

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

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

在你的 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>