连接事件

React Flow 在连接过程中会发出不同的事件，你可以使用这些事件以不同的方式更新你的 UI 或流程。下面的示例演示了触发哪些事件以及何时触发。

¥React Flow emits different events during the connection process that you can use to update your UI or your flow in different ways. The example below demonstrates which events are fired and when.


import React, { useCallback } from 'react';
import { ReactFlow, Background } from '@xyflow/react';
 
import { useState } from 'react';
import { useEffect } from 'react';
 
import '@xyflow/react/dist/style.css';
 
 
const initialNodes = [
  { id: 'a', position: { x: -100, y: 0 }, data: { label: 'A' } },
  { id: 'b', position: { x: 100, y: 0 }, data: { label: 'B' } },
  { id: 'c', position: { x: 0, y: 100 }, data: { label: 'C' } },
];
 
const initialEdges = [{ id: 'b->c', source: 'b', target: 'c' }];
 
const Flow = () => {
  const [events, setEvents] = useState({
    onReconnectStart: false,
    onConnectStart: false,
    onConnect: false,
    onReconnect: false,
    onConnectEnd: false,
    onReconnectEnd: false,
  });
 
  const onReconnectStart = useCallback(() => {
    console.log('onReconnectStart');
    setEvents({
      onReconnectStart: true,
      onConnectStart: false,
      onConnect: false,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onConnectStart = useCallback(() => {
    console.log('onConnectStart');
    setEvents((events) => ({
      ...events,
      onConnectStart: true,
      onConnect: false,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    }));
  }, []);
 
  const onConnect = useCallback(() => {
    console.log('onConnect');
    setEvents({
      onReconnectStart: false,
      onConnectStart: false,
      onConnect: true,
      onReconnect: false,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onReconnect = useCallback(() => {
    console.log('onReconnect');
    setEvents({
      onReconnectStart: false,
      onConnectStart: false,
      onConnect: false,
      onReconnect: true,
      onConnectEnd: false,
      onReconnectEnd: false,
    });
  }, []);
 
  const onConnectEnd = useCallback(() => {
    setEvents((events) => ({
      ...events,
      onReconnectStart: false,
      onConnectStart: false,
      onConnectEnd: true,
    }));
  }, []);
 
  const onReconnectEnd = useCallback(() => {
    console.log('onReconnectEnd');
    setEvents((events) => ({
      ...events,
      onReconnectStart: false,
      onConnectStart: false,
      onReconnectEnd: true,
    }));
  }, []);
 
  useEffect(() => {
    if (!events.onReconnectEnd && !events.onConnectEnd) return;
 
    let timer = window.setTimeout(() => {
      setEvents({
        onReconnectStart: false,
        onConnectStart: false,
        onConnect: false,
        onReconnect: false,
        onConnectEnd: false,
        onReconnectEnd: false,
      });
    }, 500);
 
    return () => window.clearTimeout(timer);
  });
 
  return (
    <>
      <ReactFlow
        nodes={initialNodes}
        edges={initialEdges}
        edgesReconnectable={true}
        onConnectStart={onConnectStart}
        onConnect={onConnect}
        onConnectEnd={onConnectEnd}
        onReconnectStart={onReconnectStart}
        onReconnect={onReconnect}
        onReconnectEnd={onReconnectEnd}
        fitView
        style={{ backgroundColor: "#F7F9FB" }}
        >
          <Background />
        </ReactFlow>
      <div id="event-list">
        {Object.entries(events).map(([name, active]) => (
          <p key={name} style={{ opacity: active ? 1 : 0.2 }}>
            {name}
          </p>
        ))}
      </div>
    </>
  );
};
 
export default Flow;

对于通过从句柄拖动创建的新连接，将按顺序调用以下事件：

¥For a new connection created by dragging from a handle, the following events are called in order:

使用鼠标事件和包含源节点、可能的源句柄 ID 和句柄类型的对象调用 onConnectStart。

¥onConnectStart is called with the mouse event and an object containing the source node, potentially the source handle id, and the handle type.
仅当在可连接句柄上释放连接时，会调用 onConnect。它使用完整的连接对象调用，其中包含源和目标节点以及源和目标句柄 ID（如果存在）。

¥onConnect is only called when the connection is released on a handle that is connectable. It is called with a complete connection object containing the source and target node, and the source and target handle ids if present.
当释放连接时，会调用 onConnectEnd，无论连接是否成功。它使用鼠标事件调用。

¥onConnectEnd is called when a connection is released, regardless of whether it was successful or not. It is called with the mouse event.

当通过拖动现有边重新连接边时，将按顺序调用以下事件：

¥When an edge is reconnected by dragging an existing edge, the following events are called in order:

当拾取可重新连接的边缘时，会调用 onReconnectStart。它使用鼠标事件、正在重新连接的边缘对象和稳定句柄的类型调用。

¥onReconnectStart is called when a reconnectable edge is picked up. It is called with the mouse event, the edge object that is being reconnected, and the type of the stable handle.
onConnectStart 的调用方式如上所述。

¥onConnectStart is called as above.
当在 reconnectable 句柄上释放边缘时，会调用 onReconnect。它使用旧的边缘对象和新的连接对象调用。

¥onReconnect is called when the edge is released on a handle that is reconnectable. It is called with the old edge object and the new connection object.
onConnectEnd 的调用方式如上所述。

¥onConnectEnd is called as above.
无论重新连接是否成功，都会在释放边时调用 onReconnectEnd。它使用鼠标事件、拾取的边缘和稳定句柄的类型调用。

¥onReconnectEnd is called when the edge is released, regardless of whether the reconnection was successful or not. It is called with the mouse event, the edge that was picked up, and the type of the stable handle.

你可以在我们的在边缘放置时添加节点和临时边缘示例中看到许多此类事件的使用情况！

¥You can see many of these events in use in our add node on edge drop and temporary edges examples!