javascript - 单击删除按钮时如何删除 react 流中的元素

Question

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

我试过下面的代码。

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

我也放了这个

但我们不希望这样。

如果有人知道如何做到这一点，这将是一个很大的帮助

Answer 1

我实际上只是使用带有自定义删除按钮的 React Flow 控件自己解决了这个问题。在 <ReactFlow>我添加了 onElementClick 的组件使用 React 钩子(Hook)将选定元素存储在 state 中的 prop。在 onClick按钮的 Prop 我有另一个钩子(Hook)，它从状态中获取所选元素，树的所有边缘，并调用 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])