ReactFlow的ReactFlow实例事件传参undefined处理状态切换

1.问题

ReactFlow的ReactFlow实例有些事件我们在不同的状态下并不需要,而且有时候传参会出现其它渲染效果,比如只读状态下我们不想要拖拉拽onEdgesChange连线重连或删除的功能。
请添加图片描述

2.思路

事件名称类型默认值
onEdgesChange(changes: EdgeChange[]) => void
使用这个方法来处理处理连线重新选择连接或者删除连线。
               

ReactFlow实例如果没有传监听事件方法,父节点就不会触发事件,那么我们试着切换传参处理。通过传参undefined,成功的没有触发对应事件,同时也没有出现渲染可拖拉拽连线的标志。

3.解决方案

import React, { useCallback, useRef, useState } from 'react';
import ReactFlow, { useNodesState, useEdgesState, Controls, updateEdge, addEdge } from 'reactflow';
import 'reactflow/dist/style.css';const initialNodes = [{id: '1',type: 'input',data: { label: 'Node A' },position: { x: 250, y: 0 },},{id: '2',type: 'output',data: { label: 'Node B' },position: { x: 250, y: 200 },}
];const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'updatable edge' }];const DeleteEdgeDrop = () => {const edgeUpdateSuccessful = useRef(true);const [nodes, , onNodesChange] = useNodesState(initialNodes);const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);const onConnect = useCallback((params) => setEdges((els) => addEdge(params, els)), []);//	用于控制状态const [readonly, setReadonly] = useState(true);const onEdgeUpdateStart = useCallback(() => {edgeUpdateSuccessful.current = false;}, []);const onEdgeUpdate = useCallback((oldEdge, newConnection) => {edgeUpdateSuccessful.current = true;setEdges((els) => updateEdge(oldEdge, newConnection, els));}, []);const onEdgeUpdateEnd = useCallback((_, edge) => {if (!edgeUpdateSuccessful.current) {setEdges((eds) => eds.filter((e) => e.id !== edge.id));}edgeUpdateSuccessful.current = true;}, []);return (<ReactFlownodes={nodes}edges={edges}onNodesChange={onNodesChange}onEdgesChange={onEdgesChange}snapToGrid//	这里用条件语句切换传参//	如果不需要传参,只能传undefined!!!onEdgeUpdate={!readonly? onEdgeUpdate : undefined}onEdgeUpdateStart={onEdgeUpdateStart}onEdgeUpdateEnd={onEdgeUpdateEnd}onConnect={onConnect}fitViewattributionPosition="top-right"><Controls /></ReactFlow>);
};export default DeleteEdgeDrop;

4.结果

事件传参传undefined成功的取消了事件以及渲染效果。综上所述,在ReactFlow的ReactFlow实例事件可通过传参undefined取消传参或切换事件传参。
请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3018632.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【网站项目】SpringBoot368软件开发管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

购物车操作

添加购物车&#xff1a; 需求分析和接口设计&#xff1a; 接口设计&#xff1a; 请求方式&#xff1a;POST 请求路径&#xff1a;/user/shoppingCart/add请求参数&#xff1a;套餐id、菜品id、口味返回结果&#xff1a;code、data、msg 数据库设计&#xff1a; 这上面出现了…

关于独立式电量计IC DS2781E+TR相关特性及应用

DS2781ET&R测量可充电Li和Li聚合物电池的电压、温度 和电流&#xff0c;并估算其剩余电量。用于计算电量的电池组 特性参数和应用参数存储在片上EEPROM中。根据电 量寄存器的内容&#xff0c;向主系统报告在当前温度、放电速 率、存储电荷以及应用参数下&#xff0c;剩余电…

编程入门(六)【Linux系统基础操作三】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 &#x1f525;前言&#x1f680;LInux的进程管理和磁盘管理top命令显示查看进…

Java中Maven的依赖管理

依赖介绍 是指当前项目运行所需要的jar包&#xff0c;一个项目中可以引入多个依赖 配置 在pom.xml中编写<dependencies>标签 在<dependencies>中使用<dependency>引入标签 定义坐标的groupId、rtifactId、version 点击刷新按钮、引入新坐标 例如引入下…

利用Jenkins完成Android项目打包

问题和思路 目前存在的问题 打包操作由开发人员完成&#xff0c;这样开发进度容易被打断。 解决问题的思路 将打包操作交测试/产品/开发人员来完成&#xff0c;主要是测试/开发。 按照以上的思路&#xff0c;那么JenkinsGradle的解决方案是比较经济的&#xff0c;实现起来…

20基础解决-buuctf-1.RSA1

2.buuctf-1.RSA1 RSATool2v17工具的使用 打开RSA Tool 1.Number Base 设置为十进制 2.注意&#xff1a;Public Exponent这里要使用16进制的数&#xff0c;如果公钥e17的话&#xff0c;就应该填入十六进制的11 3.给出p,q,e的话直接填入&#xff0c;再点击Calc.D,获得d 4.给出…

代码生成工具1 ——项目简介和基础开发

1 项目简介 需要提前在数据库建好表&#xff0c;然后执行代码生成工具&#xff0c;会生成简单的Java文件&#xff0c;避免重复编写增删改查代码。类似的工具网上有很多&#xff0c;本人开发这个工具属于自娱自乐。这个专栏会记录开发的过程。 2 项目搭建 数据库使用MySQL &…

CSS-背景属性

目录 背景属性 background-color (背景颜色 ) background-image (背景图片 ) background-repeat (背景图平铺方式 ) no-repeat 不平铺 repeat-x 水平方向平铺 repeat-y 垂直方向平铺 repeat 平铺 background-position (背景图位置) background-size (背景缩…

Golang | Leetcode Golang题解之第74题搜索二维矩阵

题目&#xff1a; 题解&#xff1a; func searchMatrix(matrix [][]int, target int) bool {m, n : len(matrix), len(matrix[0])i : sort.Search(m*n, func(i int) bool { return matrix[i/n][i%n] > target })return i < m*n && matrix[i/n][i%n] target }

html--瀑布效果

<!doctype html> <html> <head> <meta charset"utf-8"> <title>瀑布效果</title><style> body {background: #222;color: white;overflow:hidden; }#container {box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000;height: 1…

小程序搜索排名优化 三步操作提升

搜索排名优化最直接的一个目的就是为了提升小程序的排名和流量&#xff0c;获取用户的信任度。当用户在搜索关键词的时候&#xff0c;能让用户看到小程序&#xff0c;增加被发现和点击的机会。 一、关键词优化&#xff1a; 1.选择合适的关键词&#xff1a;选择与小程序内容高…

VMware虚拟机提示内存不足

VMware虚拟机&#xff0c;k8s集群搭建内存不足的问题 疑问&#xff1a;我的电脑是8G8G双通道的内存&#xff0c;当我在搭建k8s集群时给master-2G内存&#xff0c;node1-3G内存&#xff0c;node2-3G内存&#xff1b; 当依次打开虚拟机到node2时VM提示“物理内存不足&#xff0c;…

AI预警未来:山体滑坡与塌方事故的潜在发现者

在科技日新月异的今天&#xff0c;人工智能&#xff08;AI&#xff09;的应用已经渗透到了我们生活的各个领域。而在防灾减灾的领域中&#xff0c;AI技术的引入无疑为我们打开了一扇新的大门。以梅大高速大埔往福建方向K11900m附近发生的路面塌方灾害为例&#xff0c;我们不禁思…

数字人解决方案——AniPortrait音频驱动的真实肖像动画合成

概述 在当今数字化时代&#xff0c;将静态图像和音频素材转化为动态、富有表现力的肖像动画&#xff0c;已经成为游戏、数字媒体、虚拟现实等多个领域的重要技术。然而&#xff0c;开发人员在创建既具有视觉吸引力又能保持时间一致性的高质量动画框架方面面临着巨大挑战。其中…

阿贝云免费服务器推荐

由于近期毕设需要&#xff0c;需要将毕设上传到云服务器&#xff0c;届时答辩方便展示&#xff0c;找了很多云服务器提供商&#xff0c;发现都是需要抢或者其他要求的&#xff0c;无意中从一个知乎帖子中发现了阿贝云&#xff0c;号称永久免费&#xff0c;兴冲冲的开始免费适用…

【Git】Git学习-15:分支简介和基本操作

学习视频链接&#xff1a;【GeekHour】一小时Git教程_哔哩哔哩_bilibili​编辑https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780https://www.bilibili.com/video/BV1HM411377j/?vd_source95dda35ac10d1ae6785cc7006f365780 git bran…

解释 RESTful API 以及如何使用它构建 web 应用程序

RESTful API&#xff08;Representational State Transfer&#xff09;是一种设计风格&#xff0c;用于创建网络应用程序的 API。它基于HTTP协议&#xff0c;通过使用标准的HTTP方法&#xff08;如GET、POST、PUT和DELETE&#xff09;来实现对资源的操作。 RESTful API的设计原…

用友时空KSOA linkadd.jsp SQL注入漏洞复现

前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 一、产…