我男同同性做视频网站,大连做网站哪家好一点,创建全国文明城市应知应会知识,网站建设推广公司范围1.问题
ReactFlow的ReactFlow实例有些事件我们在不同的状态下并不需要#xff0c;而且有时候传参会出现其它渲染效果#xff0c;比如只读状态下我们不想要拖拉拽onEdgesChange连线重连或删除的功能。
2.思路
事件名称类型默认值onEdgesChange(changes: EdgeChange[]) 而且有时候传参会出现其它渲染效果比如只读状态下我们不想要拖拉拽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}fitViewattributionPositiontop-rightControls //ReactFlow);
};export default DeleteEdgeDrop;
4.结果
事件传参传undefined成功的取消了事件以及渲染效果。综上所述在ReactFlow的ReactFlow实例事件可通过传参undefined取消传参或切换事件传参。
