Antd Tree本身并没有edit功能，这里自己结合网上关于鼠标右键菜单的资料，自己写了个tree的编辑功能。
实现效果如下：
主要从Tree的onMouseEnter事件入手
1
| onMouseEnter={this.onMouseEnter}
|
初始NodeTreeItem是空的，不会有操作菜单出现。
通过对每个TreeNode的onMouseEnter事件监听，抓取当前鼠标所在子项的元素右上角坐标和子项的key,来更新state.
1
2
3
4
5
6
7
8
9
10
11
| onMouseEnter = (e) => {
var x = e.event.currentTarget.offsetLeft + e.event.currentTarget.clientWidth;
var y = e.event.currentTarget.offsetTop ;
this.setState({
NodeTreeItem: {
pageX: x,
pageY: y,
id: e.node.props.eventKey,
}
});
}
|
在render的控件中加一个动态显示的控件
1
| {this.state.NodeTreeItem != null ? this.getNodeTreeMenu() : ""}
|
这个控件的位置根据之前状态机中的控件坐标来绝对定位，同样他的菜单项也有对应的事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| getNodeTreeMenu() {
const {pageX, pageY} = {...this.state.NodeTreeItem};
const tmpStyle = {
position: 'absolute',
maxHeight: 40,
textAlign: 'center',
left: `${pageX + 10}px`,
top: `${pageY}px`,
display: 'flex',
flexDirection: 'row',
};
const menu = (
<div
style={tmpStyle}
>
<div style={{alignSelf: 'center', marginLeft: 10}} onClick={this.handleAddSub}>
<Tooltip placement="bottom" title="添加子项">
<Icon type='plus-circle-o'/>
</Tooltip>
</div>
<div style={{alignSelf: 'center', marginLeft: 10}} onClick={this.handleEditSub}>
<Tooltip placement="bottom" title="修改">
<Icon type='edit'/>
</Tooltip>
</div>
<div style={{alignSelf: 'center', marginLeft: 10}} onClick={this.handleDeleteSub}>
<Tooltip placement="bottom" title="删除">
<Icon type='minus-circle-o'/>
</Tooltip>
</div>
</div>
);
return (this.state.NodeTreeItem == null) ? '' : menu;
}
handleAddSub = (e) => {
console.log("click add id :", this.state.NodeTreeItem.id)
}
handleEditSub = (e) => {
console.log("click edit id :", this.state.NodeTreeItem.id)
}
handleDeleteSub = (e) => {
console.log("click delete id :", this.state.NodeTreeItem.id)
}
|
这里还有点问题，我们的菜单一直都会有，需要给外面的父组件一个清除该坐标的事件。如下：
1
2
3
4
5
6
7
8
9
10
| clearMenu = () => {
this.setState({
NodeTreeItem: null
})
}
<div onClick={this.clearMenu}>
<Tree ......../>
{this.state.NodeTreeItem != null ? this.getNodeTreeMenu() : ""}
</div>
|