useOnSelectionChange

此鉤子可讓您監聽節點和邊緣選擇的變更。顧名思義，當節點或邊緣的選擇發生變更時，您提供的回呼函式將會被呼叫。

您需要記憶化傳入的 onChange 處理函式，否則此鉤子將無法正常運作。

import { useState } from 'react';
import { ReactFlow, useOnSelectionChange } from '@xyflow/react';
 
function SelectionDisplay() {
  const [selectedNodes, setSelectedNodes] = useState([]);
  const [selectedEdges, setSelectedEdges] = useState([]);
 
  // the passed handler has to be memoized, otherwise the hook will not work correctly
  const onChange = useCallback(({ nodes, edges }) => {
    setSelectedNodes(nodes.map((node) => node.id));
    setSelectedEdges(edges.map((edge) => edge.id));
  }, []);
 
  useOnSelectionChange({
    onChange,
  });
 
  return (
    <div>
      <p>Selected nodes: {selectedNodes.join(', ')}</p>
      <p>Selected edges: {selectedEdges.join(', ')}</p>
    </div>
  );
}

簽名

名稱	類型
#參數
#`options`	`物件`
#`options.onChange`	`(參數: { 節點: Node[]; 邊緣: Edge[]; }) => void`
#回傳值
#	`void`

注意事項

此鉤子只能在 <ReactFlowProvider /> 或 <ReactFlow /> 元件的子元件中使用。

鉤子工具