连接事件

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

🌐 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
      >
        <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:

[onConnectStart](/api-reference/react-flow#onconnectstart) 会在鼠标事件触发时调用，并传入一个包含源节点、可能的源句柄ID以及句柄类型的对象。
[onConnect](/api-reference/react-flow#onconnect) 仅在句柄上的连接被释放且 可连接 时调用。它会使用一个完整的 连接对象 调用，该对象包含源节点和目标节点，以及如果存在的话，源和目标句柄的 ID。
onConnectEnd 会在连接释放时被调用，无论连接是否成功。它会在鼠标事件发生时被调用。

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

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

[onReconnectStart](/api-reference/react-flow#onreconnectstart) 会在选中 reconnectable edge 时被调用。它会接收鼠标事件、正在重连的边对象以及稳定句柄的类型作为参数。
onConnectStart 如上所述被称为。
onReconnect 在释放可重新连接的句柄的边时被调用。它会使用旧的边对象和新的连接对象进行调用。
onConnectEnd 如上所述被称为。
[onReconnectEnd](/api-reference/react-flow#onreconnectend) 会在边释放时被调用，无论重新连接是否成功。它会使用鼠标事件、被拾取的边以及稳定句柄的类型进行调用。

你可以在我们的在边上添加节点并拖放和临时边示例中看到使用的许多这些事件！