添加交互性

让我们实现选择、拖动和移除节点和边的功能。

在本快速入门教程中，我们将使用一个“受控组件”，这通常是您在自己的应用程序中使用 React Flow 的最佳和最灵活的方式。您也可以以非受控方式使用 React Flow。

处理变更事件

首先，让我们导入一些东西。为了管理 React Flow 中的变更，我们将使用 useState 和 React Flow 中的两个辅助函数 applyEdgeChanges 和 applyNodeChanges。

import { useState, useCallback } from 'react';
import { ReactFlow, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';

我们将为节点和边设置状态

const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);

直接在下面，我们将添加这两个函数

const onNodesChange = useCallback(
  (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
  [],
);
const onEdgesChange = useCallback(
  (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
  [],
);

当您拖动或选择节点时，onNodesChange 处理程序会被调用。借助 applyNodeChanges 函数，您可以将这些变更应用到当前节点状态。将所有内容放在一起，它应该看起来像这样

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

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

只读

现在，如果您运行应用程序，您将能够单击并拖动组件，并且 UI 会根据这些移动进行更新。

处理连接

还缺失最后一块：手动连接节点。为此，我们需要实现一个 onConnect 处理程序，并将其也传递给 <ReactFlow /> 组件

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

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

只读

尝试通过从一个句柄拖动到另一个句柄来连接这两个节点。就是这样。您已经构建了一个完全交互式的流程。

现在就到这里 :) 您做到了！如果您想继续，我们建议您查看“自定义节点”指南。

快速入门幻灯片应用