react中自定义右击菜单 antd

描述需求：需要在antd中右击表头位置产生菜单

并且可以进行点击

准备好我们的dom元素

 <div>
          <div id='menui' style={{ position: "absolute", display: "none", }}>   <Menu
            style={{ width: 100, fontSize: 28 }}
          >
            <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
          </Menu>
          </div>
        </div>

//首先
 onHeaderRow={record => {
          return {
            onContextMenu: e => {
              e.preventDefault();
              let y = e.clientY + "px";
              let x = e.clientX + "px";
              let menui = document.getElementById('menui')
              menui.style.left = x
              menui.style.top = y
              menui.style.display = 'block'
              menui.style.zIndex = 10
              document.body.addEventListener("click", show);
              //  document.body.addEventListener("click", this.bodyClick);
            },
          };
        }}

先对表头进行事件绑定

 const show = (e) => {
    let menui = document.getElementById('menui')
    menui.style.display = 'none'
    document.body.removeEventListener("click", show);
  }

现在的问题 是 左键点了菜单，菜单也会消失，因为触发了show函数
这里的body事件会比checkout onchange事件优先触发
所以我们只要在onchange中在进行一次回显就好了

  const onChange = list => {
    let menui = document.getElementById('menui')
    menui.style.display = 'block'
    menui.style.zIndex = 10
    document.body.addEventListener("click", show);
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };

这样就ok了，花费了我一下午，不知道适不适合做前端