如何在单击delete按钮的同时删除react-flow中的元素

Question

我在我的项目中使用了react-flow-renderer。我们有一个要求，我们想要通过单击该元素来删除它。

​

​

我已经尝试了下面的代码。

const onElementsRemove = (elementsToRemove) =>
setElements((els) => removeElements(elementsToRemove, els));

我还把这个

​

​

但我们不希望这样。

有谁知道怎么做吗?这将是一个很大的帮助。

Answer 1

实际上，我自己使用带有自定义删除按钮的React流控件解决了这个问题。在<ReactFlow>组件中，我添加了onElementClick prop，它使用React钩子来存储状态中的选定元素。在按钮的onClick属性中，我有另一个钩子，它从状态中获取所选元素，树的所有边，并调用getConnectedEdges()，它将返回连接到所选元素的所有边。然后，只需将包含所选元素和连接边的数组传递给onElementsRemove()。

以下是onElementClick的文档。https://reactflow.dev/docs/api/component-props/

​

<ReactFlow 
    className={flowStyles}
    elements={elements}
    onElementClick={onClickElement}
>
  <Controls showInteractive={false}>
    <ControlButton onClick={onClickElementDelete}>
      <DeleteIcon />
    </ControlButton>
  </Controls>
</ReactFlow>

​

const onClickElement = useCallback((event: ReactMouseEvent, element: Node | Edge) => {
  // Set the clicked element in local state
  setState({
    clickedElement: [element]
  })
}, [])

以下是getConnectedEdges的文档。https://reactflow.dev/docs/api/helper-functions/

​

  const onClickElementDelete = useCallback(() => {
    // Get all edges for the flow
    const edges = elements.filter((element: Node | Edge) => isEdge(element))
    // Get edges connected to selected node
    const edgesToRemove = getConnectedEdges(state.clickedElement, edges)

    onElementsRemove([...state.clickedElement, ...edgesToRemove])
    }
  }, [elements, onElementsRemove, state.clickedElement])

​

Answer 2

您必须在自定义节点的data属性中添加delete函数，单击自定义节点的delete按钮时，必须调用该函数

创建自定义节点=>时

const newNode = {
  id: nodeID,
  type,
  position,
  data: {
      onDelete : yourFunctionToDelete
  }}

删除按钮=> onClick={props.data.onDelete}中的自定义节点代码