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 | (パラメーター: { nodes: Node[]; edges: Edge[]; }) => void |
#戻り値 | |
void |
備考
- このフックは、
<ReactFlowProvider />または<ReactFlow />コンポーネントの子コンポーネントでのみ使用できます。