添加交互性

¥Adding Interactivity

现在我们已经构建了第一个流程，让我们添加交互功能，以便你可以选择、拖动和删除节点和边。

¥Now that we’ve built our first flow, let’s add interactivity so you can select, drag, and remove nodes and edges.

在本入门教程中，我们将使用 React Flow 作为 “受控组件” 。这通常是将其集成到应用中最灵活、最可靠的方法。（如果你愿意，也可以在不受控制的方式中使用 React Flow。

¥In this Getting Started tutorial, we’ll use React Flow as a “controlled component” . This is typically the most flexible and reliable approach for integrating it into your applications. (If you prefer, you can also work with React Flow in an uncontrolled way.

处理变化事件

¥Handling Change Events

继续构建流程，让我们深入了解一些基本知识。为了管理变更，我们将使用 useState 和 React Flow 中的两个辅助函数：applyEdgeChanges 和 applyNodeChanges。我们可以像这样将它们导入到我们的项目中：

¥Continuing from Building a Flow, let’s dive into some essentials. To manage changes, we’ll be using useState with two helper functions from React Flow: applyEdgeChanges and applyNodeChanges. We can import these into our project like this:


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

接下来，我们将设置节点和边的状态：

¥Next, 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 函数随后使用这些更改事件来更新节点的当前状态。以下是它们是如何组合在一起的。尝试点击并拖动节点来移动它，并实时观察 UI 更新。

¥When you drag or select a node, the onNodesChange handler is triggered. The applyNodeChanges function then uses these change events to update the current state of your nodes. Here’s how it all comes together. Try clicking and dragging a node to move it around and watch the UI update in real time.


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;

处理连接

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


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.