ReactJS中无需jQuery，如何在数据请求时禁用所有点击事件？

嘿，我明白你的痛点——用jQuery一个个去禁用元素太麻烦，而且没法全局覆盖所有点击场景。这里有几个基于React+Redux的原生方案，完全不用依赖jQuery，能完美解决你的需求：

这个思路是当isFetching为true时，在页面最上层添加一个全屏透明遮罩，直接拦截所有下层元素的点击事件，无需逐个处理DOM节点。

实现步骤： #

1. 在根组件（比如App.js）中从Redux取出isFetching状态
2. 条件渲染一个全屏遮罩div，通过CSS确保它覆盖整个页面
3. 可选添加半透明背景，给用户直观的加载中提示

代码示例： #

import { useSelector } from 'react-redux';

function App() {
  // 替换成你的reducer路径
  const isFetching = useSelector(state => state.global.isFetching);

  return (
    <div className="app-root">
      {/* 你的所有页面内容 */}
      
      {/* 全局加载遮罩 */}
      {isFetching && (
        <div className="loading-overlay" />
      )}
    </div>
  );
}

对应的CSS：

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.6); /* 半透明背景，可选 */
  z-index: 9999; /* 确保遮罩在所有内容上方 */
  pointer-events: auto; /* 捕获点击事件，阻止下层元素响应 */
}

如果不想添加遮罩层，可以通过全局事件委托，根据isFetching状态动态拦截点击事件。

实现步骤： #

1. 在根组件中监听document的点击事件
2. 当isFetching为true时，阻止事件的默认行为和冒泡
3. 可选添加白名单，允许特定元素在加载时仍可点击

代码示例： #

import { useSelector, useEffect } from 'react-redux';

function App() {
  const isFetching = useSelector(state => state.global.isFetching);

  useEffect(() => {
    const handleGlobalClick = (e) => {
      // 白名单判断：如果点击的是允许加载时点击的元素，不拦截
      if (isFetching && !e.target.closest('.allow-click-while-fetching')) {
        e.preventDefault();
        e.stopPropagation();
      }
    };

    document.addEventListener('click', handleGlobalClick);
    // 组件卸载时移除监听
    return () => document.removeEventListener('click', handleGlobalClick);
  }, [isFetching]);

  return (
    <div className="app-root">
      {/* 你的页面内容 */}
      {/* 这个按钮在加载时仍可点击 */}
      <button className="allow-click-while-fetching">紧急操作按钮</button>
    </div>
  );
}

如果需要在多个项目或组件中复用这个功能，可以把拦截逻辑封装成自定义Hook：

代码示例： #

import { useSelector, useEffect } from 'react-redux';

export const useBlockClicksDuringFetch = () => {
  const isFetching = useSelector(state => state.global.isFetching);

  useEffect(() => {
    const handleClick = (e) => {
      if (isFetching && !e.target.closest('.allow-click-while-fetching')) {
        e.preventDefault();
        e.stopPropagation();
      }
    };

    document.addEventListener('click', handleClick);
    return () => document.removeEventListener('click', handleClick);
  }, [isFetching]);
};

然后在根组件中直接调用：

function App() {
  useBlockClicksDuringFetch();

  return (
    <div className="app-root">
      {/* 你的页面内容 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者sravan ganji