添加交互

让我们可以选择、拖动和删除节点和边。

信息

在本入门教程中，我们将使用“受控组件”，这通常是在您自己的应用程序中使用 React Flow 的最佳且最灵活的方式。您还可以以不受控制的方式使用 React Flow。

处理变更事件

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

import { useState, useCallback } from 'react';
import ReactFlow, { applyEdgeChanges, applyNodeChanges } from 'reactflow';

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

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)),
  [],
);

当您拖动或选择节点时，将调用 onNodeChange 处理程序。在 applyNodeChanges 函数的帮助下，您可以将这些更改应用到当前的节点状态。把所有东西放在一起，它应该看起来像这样：

参考预览：https://codesandbox.io/s/w3gm5v?file=%2FApp.js&utm_medium=sandpack

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

处理连接

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

参考预览：https://codesandbox.io/s/t3nv5m?file=%2FApp.js&utm_medium=sandpack

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

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

处理变更事件​

处理连接​

处理变更事件

处理连接