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.

Warning

你需要对传递的 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>
  );
}

签名

🌐 Signature

Parameters:

Name	Type	Default
`[0].onChange`	`OnSelectionChangeFunc<NodeType, EdgeType>` The handler to register.

Returns:

void

注释

🌐 Notes

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