使用react-flow-renderer拖放时复制节点
使用react-flow-renderer拖放时复制节点
提问于 2020-08-06 14:22:53
我正在尝试实现:原始节点应该留在它的位置，并在其上进行拖放，必须在拖放位置创建一个新节点。原件应保持在初始位置。
拖动重复节点应该只会改变它的位置。
import React, { Component, MouseEvent } from 'react'
import ReactFlow from 'react-flow-renderer'
export default class Platform extends Component {
constructor(props) {
super(props)
this.state = {
duplicates : [],
original: [{id: "original", data: {label: 'original', duplicate: false }, position: {x:100, y:100}, style: this.style}]
}
}
lastId = 0
style = { background: '#ccc', width: 50, height: 50, borderRadius: 50}
onNodeDragStart = (evt: MouseEvent, node: Node) => {
}
onNodeDragStop = (evt: MouseEvent, node: Node) => {
if(!node.data.duplicate){
node.id = (this.lastId++).toString(10)
node.data.duplicate = true
node.data.label = "duplicate"
this.setState(prevState => ({
duplicates: prevState.duplicates.concat(node)
}))
}
}
render() {
console.log("state: ", this.state)
const elements = this.state.original.concat(this.state.duplicates)
const graphStyles = { width: '100%', height: '800px' };
return (
<div>
<ReactFlow onNodeDragStart={this.onNodeDragStart} onNodeDragStop={this.onNodeDragStop} style={graphStyles} elements={elements}></ReactFlow>
</div>
)
}
}原始节点
拖放后在拖放位置创建一个重复的节点。当我看到组件的状态时，它仍然显示原始的位置为position:{x:100, y:100}。但它并不在那个位置。
如何在创建复制节点时保持原始节点的完整性？
回答 1
Stack Overflow用户
发布于 2020-08-06 16:28:32
您必须添加将更新状态中的位置的代码。默认情况下，此位置仅在创建新元素时使用，但随后不会更新。您可以通过将onNodeDragStop处理程序更改为以下内容来解决此问题：
onNodeDragStop = (evt: MouseEvent, node: Node) => {
if (!node.data.duplicate) {
this.setState(prevState => ({
original: prevState.original.map((n) => {
if (n.id !== node.id) return node;
return {
...node,
position: {
x: node.position.x,
y: node.position.y
}
}
}),
duplicates: [
...prevState.duplicates,
{
...node,
id: (this.lastId++).toString(10),
data: {
...node.data,
duplicate: true,
label: "duplicate"
},
}
]
}))
}
}另外，我更改了您的代码，不改变原始节点，而是返回一个新的节点，并更改了一些属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63277936
复制相关文章
相似问题
腾讯云开发者
