antd Tree treenode下选中节点复制到另一Tree
时间: 2023-07-03 19:09:58 浏览: 47
可以通过以下步骤实现:
1. 在源 Tree 的 onSelect 方法中获取选中的节点数据,保存到状态中。
2. 在目标 Tree 的 onDrop 方法中,获取拖拽后的节点数据,将其添加到目标 Tree 中,并根据保存在状态中的节点数据设置选中状态。
具体实现代码如下:
```jsx
import { Tree } from 'antd';
const { TreeNode } = Tree;
class SourceTree extends React.Component {
state = {
selectedNode: null,
};
onSelect = (selectedKeys, info) => {
this.setState({ selectedNode: info.node.props.data });
};
render() {
return (
<Tree onSelect={this.onSelect}>
<TreeNode key="sourceNode" title="Source Node" data="sourceData" />
</Tree>
);
}
}
class TargetTree extends React.Component {
state = {
selectedKeys: [],
nodes: [],
};
onDrop = (info) => {
const { nodes } = this.state;
const { data } = info.node.props;
nodes.push(data);
this.setState({ nodes }, () => {
const { selectedNode } = this.props;
if (selectedNode) {
const selectedKeys = nodes.reduce((keys, node, index) => {
if (node === selectedNode) {
keys.push(index.toString());
}
return keys;
}, []);
this.setState({ selectedKeys });
}
});
};
renderTreeNode = (node, index) => {
return (
<TreeNode key={index} title={node.title} data={node.data}>
{node.children.map(this.renderTreeNode)}
</TreeNode>
);
};
render() {
const { nodes, selectedKeys } = this.state;
return (
<Tree onDrop={this.onDrop} selectedKeys={selectedKeys}>
{nodes.map(this.renderTreeNode)}
</Tree>
);
}
}
class App extends React.Component {
render() {
const { selectedNode } = this.state;
return (
<div>
<SourceTree />
<TargetTree selectedNode={selectedNode} />
</div>
);
}
}
```
在上面的代码中,SourceTree 组件只包含一个节点,用于展示源树。
TargetTree 组件包含多个节点,用于展示目标树。在 onDrop 方法中,将拖拽后的节点数据添加到 nodes 状态中,并根据 selectedNode 状态设置选中状态。renderTreeNode 方法用于递归渲染树节点。
App 组件用于渲染 SourceTree 和 TargetTree 组件,并将 selectedNode 作为 props 传递给 TargetTree 组件。
注意:这里只是一个简单的示例,实际场景中可能需要根据具体需求进行修改。