Primereact 树上下文菜单不会在操作后隐藏

问题描述

我正在使用 Primereact 的树和上下文菜单。执行操作（菜单项之一上的单击事件）后，上下文菜单不会隐藏。如果我点击屏幕上的任何地方，上下文菜单就会隐藏。这是代码。我遵循 Primereact 提供的相同模式。你能帮我弄清楚如何解决这个问题吗？

DemoPrimeReact.js

{'d':'AAAAA@X##{"pp-0": 1000,"pp-1":1001,"pp-2":1002,"pp-3": 1003,"pp-4": 1004,"pp-5": 1005,"pp-6": 1006,"pp-7": 1007,"pp-8": 1008,"pp-9": 1009,"pp-10": 1010,"pp-11": 1011,"pp-12": 1012,"pp-13": 1013,"pp-14": 1014,"pp-17": 1015,"pp-27": 1016}'}

DemoContextMenu.js

import React,{useContext,useEffect,useRef,useState} from 'react';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.css';
import 'primeflex/primeflex.css';
import {Tree} from 'primereact/tree';
// other imports

const DemoPrimeReact = () => {
  // .... other lines skipped
  const [selectednodeKey,setSelectednodeKey] = useState(null);
  const contextMenu = useRef(null);

  return (
    <>
      <DemoContextMenu
        contextMenu={contextMenu} setSelectednodeKey={setSelectednodeKey}
        //... other props
      />
      <Tree
        value={[withOrWithoutSearchNodes[0]]}
        selectionMode="single" selectionKeys={selectedKey} onSelectionChange={handleSelectionChange}
        onSelect={onNodeselect} onUnselect={onNodeUnselect}
        expandedKeys={expandedKeys} onToggle={(event) => setExpandedKeys(event.value)}
        contextMenuSelectionKey={selectednodeKey}
        onContextMenuSelectionChange={(event) => setSelectednodeKey(event.value)}
        onContextMenu={(event) => contextMenu.current.show(event.originalEvent)}
        dragdropScope="catalog-dnd" onDragDrop={(event) => {
        handleCatalogDragAndDrop(event,setLoading,setCanPaste,loadChildrenOnExpand,setSelectedKey,setExpandedKeys,onNodeselect,setNodes,expandedKeys);
        }}
        onExpand={loadChildrenOnExpand} className={classes.primeTree} nodeTemplate={nodeTemplate}
       />
    </>
  );
}

export default DemoPrimeReact;

解决方法

我认为您可以使用 contextMenu 使用 contextMenu.current.state.visible = false; ref 隐藏上下文菜单。

您可以在开始时将此行放在 handleCatalogAction(...) 函数中。在添加以上行之前，您可以执行 console.log(contextMenu); 检查 current.state.visible 值。