如何在单击删除按钮时删除反应流中的元素

Question

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

我尝试过以下代码。

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

我也把这个

但我们不希望这样。

任何人都可以知道如何做到这一点，这将是一个很大的帮助

Answer 1

实际上，我自己使用带有自定义删除按钮的 React Flow 控件解决了这个问题。在组件中<ReactFlow>，我添加了onElementClick使用 React hook 将所选元素存储在状态中的 prop。在onClick按钮的 prop 中，我有另一个钩子，它从状态获取所选元素、树的所有边，并调用它将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 onClickElement = useCallback((event: ReactMouseEvent, element: Node | Edge) => {
  // Set the clicked element in local state
  setState({
    clickedElement: [element]
  })
}, [])