加入互動性

讓我們讓節點和邊線可以被選取、拖曳和移除。

在這個「開始使用」的教學中，我們將使用一個「受控元件」，這通常是在您自己的應用程式中使用 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>
}

唯讀

嘗試從一個控制點拖曳到另一個控制點來連接兩個節點。就這樣。您已經建立了一個完全互動的流程。

目前就這樣了 :) 您成功了！如果您想繼續前進，我們建議您查看「自訂節點」指南。

快速入門投影片應用程式