selected要把子集也赋值给checkedKeys,右键 菜单显示,隐藏右键菜单可以设置遮罩层,点击遮罩层隐藏
// 左键函数:注意把selectedKeys下的子集也要赋给checkedKeys
onSelect = (selectedKeys,e) => {
const childrenKeys = e.node.getNodeChildren().map(item => item.key)
this.setState({ checkedKeys: selectedKeys.length > 0 ?
selectedKeys.concat(childrenKeys) : selectedKeys, selectedKeys });
};
// 选择复选框触发函数
onCheckTree = (checkedKeys, checkedNodes) => {
this.setState({
checkedKeys,
};
// 右键触发函数
rightClickTree = e => {
this.setState({
rightClickData: e.node.props.dataRef,
checkedKeys: [],// 复选框清空
selectedKeys: [e.node.props.dataRef.id],// 右键的节点设置selected
contextMenuVisiable: true,// 显示右键菜单
contextMenuStyle: { top: e.event.clientY, left: e.event.clientX },// 右键菜单位置
});
};
// 树结构
<Tree
checkable
multiple
onCheck={this.onCheckTree}
onSelect={this.onSelect}
checkedKeys={checkedKeys}
selectedKeys={selectedKeys}
onRightClick={this.rightClickTree}
>
// 右键菜单
<Fragment>
{contextMenuVisiable && (
<div className={styles.contextMenu} style={{ ...contextMenuStyle, position: 'fixed'
}}>右键菜单。。。各种操作</div>
)}
<Fragment>