React/Redux：如何拦截嵌套组件事件并在激活编辑按钮时阻止全页事件？

嘿，这个场景我之前在React+Redux项目里也折腾过，给你几个实用的解决方案，你可以根据项目需求挑：

这个方案通过Redux的全局状态来控制是否拦截页面所有事件，逻辑清晰，适合不需要视觉遮罩的场景：

1. 添加Redux状态：在你的store里新增一个isEditingActive状态，初始值设为false，同时写对应的action和reducer来切换这个状态。
2. 在TodoListAdd中触发状态变更：当编辑按钮被点击时，dispatch action把isEditingActive设为true；编辑完成（比如点击保存/取消）时，再把它设回false。
3. 在App组件中监听状态并拦截事件：利用useEffect监听isEditingActive的变化，当状态为true时，给document添加全局事件监听（注意用捕获阶段监听，这样能优先拦截事件），状态为false时移除监听。

示例代码：

// App组件
import { useSelector, useDispatch } from 'react-redux';
import { setIsEditingActive } from './store/actions';

function App() {
  const isEditingActive = useSelector(state => state.global.isEditingActive);
  const dispatch = useDispatch();

  useEffect(() => {
    const blockExternalEvents = (e) => {
      // 允许编辑区域的事件正常触发，拦截其他区域
      const isEditArea = e.target.closest('.todo-list-add');
      if (!isEditArea) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
      }
    };

    if (isEditingActive) {
      // 监听常用事件：click、mousedown、keydown，可根据需求调整
      document.addEventListener('click', blockExternalEvents, true);
      document.addEventListener('mousedown', blockExternalEvents, true);
    } else {
      document.removeEventListener('click', blockExternalEvents, true);
      document.removeEventListener('mousedown', blockExternalEvents, true);
    }

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      document.removeEventListener('click', blockExternalEvents, true);
      document.removeEventListener('mousedown', blockExternalEvents, true);
    };
  }, [isEditingActive]);

  return (
    <div className="app-container">
      {/* 你的四个嵌套容器 */}
      <TodoListAdd />
      {/* 其他容器组件 */}
    </div>
  );
}

// TodoListAdd组件
import { useDispatch } from 'react-redux';
import { setIsEditingActive } from '../store/actions';

function TodoListAdd() {
  const dispatch = useDispatch();

  const handleEditStart = () => {
    dispatch(setIsEditingActive(true));
  };

  const handleEditFinish = () => {
    dispatch(setIsEditingActive(false));
  };

  return (
    <div className="todo-list-add">
      <button onClick={handleEditStart}>编辑</button>
      {/* 编辑表单区域，完成时调用handleEditFinish */}
      <div className="edit-form">
        <input type="text" placeholder="输入内容" />
        <button onClick={handleEditFinish}>完成</button>
      </div>
    </div>
  );
}

如果需要给用户一个“编辑中，请勿操作其他区域”的视觉提示，这个方案更合适。通过React Portal在页面最上层添加一个遮罩层，遮罩层会拦截所有点击事件，同时让编辑区域浮在遮罩层上方：

1. 创建遮罩组件：用createPortal把遮罩层挂载到document.body，这样它能覆盖整个页面：

// Mask组件
import { createPortal } from 'react-dom';
import { useSelector, useDispatch } from 'react-redux';
import { setIsEditingActive } from './store/actions';

function EditMask() {
  const isEditingActive = useSelector(state => state.global.isEditingActive);
  const dispatch = useDispatch();

  if (!isEditingActive) return null;

  const handleMaskClick = () => {
    // 点击遮罩层可以触发关闭编辑，或者直接阻止事件
    dispatch(setIsEditingActive(false));
    // 如果不想点击遮罩关闭，就用 e.preventDefault() + e.stopPropagation()
  };

  return createPortal(
    <div 
      className="edit-mask"
      onClick={handleMaskClick}
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        zIndex: 999,
        cursor: 'not-allowed'
      }}
    />,
    document.body
  );
}

2. 在App中引入遮罩组件：把它放在所有内容的外面（或者里面都可以，因为Portal会挂载到body）：

function App() {
  return (
    <>
      <EditMask />
      <div className="app-container">
        {/* 嵌套容器 */}
        <TodoListAdd />
      </div>
    </>
  );
}

3. 设置编辑区域的层级：给TodoListAdd的容器加一个更高的z-index，确保它在遮罩层上方：

.todo-list-add {
  position: relative;
  z-index: 1000;
}

这个方案不仅能拦截事件，还能给用户明确的视觉反馈，体验更好。

如果你的事件都是冒泡到App根元素的，也可以直接在App的根容器上添加事件监听，根据Redux状态决定是否拦截：

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

  const handleAppClick = (e) => {
    if (isEditingActive) {
      const isEditArea = e.target.closest('.todo-list-add');
      if (!isEditArea) {
        e.stopPropagation();
        e.preventDefault();
      }
    }
  };

  return (
    <div className="app-container" onClick={handleAppClick}>
      {/* 嵌套容器 */}
    </div>
  );
}

不过这个方案有局限性：如果有些事件在捕获阶段处理，或者没有冒泡到App根元素，就拦截不到，所以更适合简单场景。

内容的提问来源于stack exchange，提问作者Max Wolfen