antd Tree组件中，自定义右键菜单

最近项目中，有一个需求是自定义antd的Tree组件的右键菜单功能。

直接上代码

class Demo extends Component {
  state = {
    rightClickNodeTreeItem: {
      pageX: "",
      pageY: "",
      id: "",
      categoryName: ""
    }
  }

  // tree列表上右键事件
  onRightClick = e => {
    this.setState({
      rightClickNodeTreeItem: {
        pageX: e.event.pageX,
        pageY: e.event.pageY,
        id: e.node.props["data-key"],
        categoryName: e.node.props["data-title"]
      }
    });
  };

  // 自定义右键菜单内容

   getNodeTreeRightClickMenu = () => {
    const { pageX, pageY, id, categoryName } = { ...this.state.rightClickNodeTreeItem };
    const tmpStyle = {
      position: "absolute",
      left: `${pageX - 220}px`,
      top: `${pageY - 102}px`
    };
    const menu = (
      <div style={tmpStyle} className="self-right-menu">
        <a onClick={this.addDownGroup.bind(this, id)}>新增下级部门</a>
        <a onClick={this.editGroup.bind(this, id, categoryName)}>修改</a>
        <a>删除目录</a>
      </div>
    );
    return this.state.rightClickNodeTreeItem == null ? "" : menu;
  };

  render(){
   return (
     ...
      {this.getNodeTreeRightClickMenu()}
     ...
   )
  }

}

export default Demo;

转载于:https://www.cnblogs.com/zhouyangla/p/9795998.html