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}即可，大功告成，收摊回家。

原文地址：https://blog.csdn.net/lplovewjm/article/details/137876898

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！