如何在点击删除按钮时从React-Flow中删除一个元素。

Question

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

我已经尝试了以下代码。

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

我也放了这个

但是我们不希望这样。

如果有人对如何做到这一点有任何想法，那将是非常有帮助的。

- Dharmendra Soni

---

请问您能否展示一些相关的代码？您应该考虑包含 removeElement 函数以及展示如何存储或渲染元素的代码，您是否将它们保存在状态中？ - Kevin Haxhi

Answer 1

我刚刚使用React Flow控件和自定义删除按钮解决了这个问题。在<ReactFlow>组件中，我添加了onElementClick属性，它使用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])

- Nick Winning

Answer 2

您需要在自定义节点的数据属性中添加删除功能，并在自定义节点的删除按钮点击时调用该函数。

创建自定义节点时 =>

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

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

- Harsh

---

你试过这个吗？我认为这不会起作用，因为传递给新节点的状态在时间上是“固定”的，所以如果你添加两个节点并尝试删除第一个节点，那么你的第二个节点也会消失。 - Benobab

我可以确认。因此，在数据中传递回调函数存在问题。官方文档提到，使用组件外部的单独状态管理解决方案，并从节点内触发存储的操作可以解决这个问题。 - Noxware

Answer 3

您可以使用一个单独的状态管理库，放在组件外部，并直接从节点内触发操作。

这种技术在官方文档“使用状态管理库”中有提到。

其中写道：

正如您在先前的指南和示例中所看到的，React Flow 可以轻松地使用本地状态来处理您的图表节点和边缘。当您的应用程序增长并且您想要从节点内部更改状态时，例如，事情可能会变得更加复杂。为了避免通过节点数据字段传递函数，您可以使用 React 上下文或按照本指南中所述添加状态管理库。

例如，如果您像文档中所示创建了一个 Zustand 存储，并从中公开了一个 deleteNode 操作，则可以通过 const deleteNode = useStore((s) => s.deleteNode); 在自定义节点中访问它。

- Noxware

Answer 4

我可以使用下面的函数实现以下内容。

const deleteNodeById = (id) => {
    flowInstance.setNodes((nds) => nds.filter((node) => node.id !== id))
  }

将此函数传递给我的删除按钮（在我的情况下是mui删除图标）。

<DeleteOutlined
 onClick={() => deleteNodeById(data.id)}
/>

- ARMEL FOPA