最近專案中，有一個需求是自定義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;