React Flow浏览器默认事件失效问题解决

前情提要

React Flow可以使用滑轮来实现对于该部分区域的放大和缩小，并且自动拦截浏览器默认的滑轮和滑轮+按键组合事件，如：Ctrl+鼠标滑轮事件。那么这就导致在非该区域的地方使用了浏览器默认的滑轮事件且改变了原有页面的大小时，在回到React Flow区域当中，并不能够还原，本文主要针对的是，在不影响当前Flow的功能外，实现对浏览器Ctrl+鼠标滑轮事件的解除拦截效果。

实现流程

首先要明确一个事，React Flow有一个属性可以对浏览器事件进行解除拦截的效果的。这个属性叫

preventScrolling（true：拦截，false：不拦截）

当我们添加这个属性时，可以通过true或false进行对浏览器事件的解绑和绑定的效果，了解了这个那么接下来的事情就好办了。那就是使用动态布尔值来进行对该属性进行处理，并且使用react的状态管理、钩子、键盘监听来实现这个对Ctrl+鼠标滑轮的解绑。

实现流程

首先引入相关库：

import React, { useEffect, useState } from 'react';

定义状态变量及函数：

  const [isCtrlPressed, setIsCtrlPressed] = useState(true);  // 状态跟踪 Ctrl 键是否被按下

钩子函数里面放监听,两个监听，一个是ctrl被按下为false，一个是ctrl被释放为true。

 useEffect(() => {
    const handleKeyDown = (event: any) => {
      if (event.ctrlKey) {
        setIsCtrlPressed(false);
      }
    };

    const handleKeyUp = (event: any) => {
      if (!event.ctrlKey) {
        setIsCtrlPressed(true);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, []);

最后在ReactFlow组件中添加 preventScrolling={isCtrlPressed}即可，大功告成，收摊回家。