连接事件

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

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

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

• onConnectStart 会与鼠标事件以及包含源节点、潜在的源手柄 ID 以及手柄类型的对象一起调用。

• onConnect 仅在连接被释放到可连接的手柄上时调用。 它会与包含源节点和目标节点，以及源手柄 ID 和目标手柄 ID（如果存在）的完整连接对象一起调用。

• onConnectEnd 在连接被释放时调用，无论它是否成功。 它会与鼠标事件一起调用。

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

• onReconnectStart 在可重新连接的边被拾取时调用。 它会与鼠标事件、正在重新连接的边对象以及稳定手柄的类型一起调用。

• onConnectStart 如上所述被调用。

• onReconnect 在边被释放到可重新连接的手柄上时调用。 它会与旧的边对象和新的连接对象一起调用。

• onConnectEnd 如上所述被调用。

• onReconnectEnd 在边被释放时调用，无论重新连接是否成功。 它会与鼠标事件、被拾取的边以及稳定手柄的类型一起调用。