useOnSelectionChange()

此钩子可让你监听节点和边缘选择的变化。顾名思义，只要节点或边的选择发生变化，就会调用你提供的回调。

¥This hook lets you listen for changes to both node and edge selection. As the name implies, the callback you provide will be called whenever the selection of either nodes or edges changes.

你需要记住传递的 onChange 处理程序，否则钩子将无法正常工作。

¥You need to memoize the passed onChange handler, otherwise the hook will not work correctly.


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>
  );
}

签名

¥Signature

Name	Type
#Params
#`options`	`object`
#`options.onChange`	`(params: { nodes: Node[]; edges: Edge[]; }) => void`
#Returns
#	`void`

注释

¥Notes

此钩子只能在作为 <ReactFlowProvider /> 或 <ReactFlow /> 组件的子组件中使用。

¥This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.