为何在reducer函数内调用preventDefault()无法生效？

现象总结 #

• 拖拽场景下，在Reducer函数内调用event.preventDefault()无法让目标元素允许放置，指针仍显示无效图标
• 将preventDefault()移至直接接收事件的处理函数中时，目标元素可正常响应放置操作

核心原因 #

浏览器的拖拽事件（如dragover）要求在事件触发的同步阶段调用preventDefault()，才能阻止默认的"禁止放置"行为。而Reducer是用于处理状态更新的纯函数，它的执行时机通常在事件处理函数触发之后，此时浏览器已经完成了默认行为的处理，再调用preventDefault()已经无法生效。

另外，React的状态更新是异步的，若在Reducer中尝试读取状态来判断是否调用preventDefault()，不仅时机太晚，还可能获取不到最新的状态值。

解决方案 #

要兼顾"基于最新状态判断"和"及时阻止默认行为"，可以采用以下两种方式：

1. 在事件处理函数中直接判断并执行
   在接收事件的处理函数里，先获取最新状态（通过useSelector或直接访问组件内的状态变量），同步判断是否需要调用preventDefault()，再分发action到Reducer处理状态更新：

   const handleDragOver = (e: React.DragEvent) => {
     // 获取最新状态
     const allowDrop = useSelector(state => state.drag.allowDrop);
     if (allowDrop) {
       e.preventDefault();
     }
     // 分发action到Reducer处理后续逻辑
     dispatch({ type: 'DRAG_OVER', payload: { target: e.target } });
   };
   

2. 用useRef保存最新状态
   如果组件内状态更新频繁，担心事件处理函数中获取的状态不是最新值，可以用useRef实时同步状态，再在事件处理函数中基于ref的值判断：

   const currentState = useSelector(state => state.drag);
   const stateRef = useRef(currentState);
   
   // 实时同步状态到ref
   useEffect(() => {
     stateRef.current = currentState;
   }, [currentState]);
   
   const handleDragOver = (e: React.DragEvent) => {
     if (stateRef.current.allowDrop) {
       e.preventDefault();
     }
     dispatch({ type: 'DRAG_OVER', payload: { target: e.target } });
   };
   

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