添加交互性

¥Adding Interactivity

让我们使其能够选择、拖动和删除节点和边缘。

¥Let’s make it so we can select, drag, and remove nodes and edges.

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

¥In this Getting Started tutorial, we are going to use a “controlled component” , which is typically the best and most flexible way to use React Flow in your own applications. You can also use React Flow in an uncontrolled way.

处理更改事件

¥Handle Change Events

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

¥First let’s import a few things. To manage the changes in React Flow, we’ll be using useState and the two helper function applyEdgeChanges and applyNodeChanges from React Flow.


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

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

¥We’re going to set up states for both the nodes and edges:


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

在正下方，我们将添加这两个函数：

¥Directly beneath that, we’ll add these two functions:


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

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

¥When you drag or select a node, the onNodesChange handler gets called. With help of the applyNodeChanges function you can then apply those changes to your current node state. Putting everything together, it should look like this:


import { useState, useCallback } from 'react';
import {
  ReactFlow,
  Controls,
  Background,
  applyNodeChanges,
  applyEdgeChanges,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
const initialEdges = [
  { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
];
 
function Flow() {
  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)),
    [],
  );
 
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow
        nodes={nodes}
        onNodesChange={onNodesChange}
        edges={edges}
        onEdgesChange={onEdgesChange}
        fitView
      >
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

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

¥Now if you run your application, you’ll be able to click and drag the components, and the UI will update based on those movements.

处理连接

¥Handle Connections

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

¥One last piece is missing: connecting nodes manually. For this we need to implement an onConnect handler and pass it to the <ReactFlow /> component as well:


import { useState, useCallback } from 'react';
import {
  ReactFlow,
  Controls,
  Background,
  applyNodeChanges,
  applyEdgeChanges,
  addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];
 
const initialEdges = [];
 
function Flow() {
  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)),
    [],
  );
 
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [],
  );
 
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow
        nodes={nodes}
        onNodesChange={onNodesChange}
        edges={edges}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      >
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}
 
export default Flow;

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

¥Try to connect the two nodes by dragging from on handle to another one. That’s it. You’ve built a fully interactive flow.

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

¥That’s it for now :) You made it! If you want to move on, we recommend to check out the “Custom Nodes” guide.