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

Question

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

DemoPrimeReact.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;

DemoContextMenu.js

import React, {useState} from 'react';
import {ContextMenu} from "primereact/contextmenu";

const DemoContextMenu = (props) => {

  const { contextMenu, setSelectedNodeKey } = props;
  
  const menu = [
    {
      label: "Create Library",
      template: (item, options) => {
        return (
          <>
            {
              nodeInfo && (nodeInfo.node.value.entryType === 'M' ||
                nodeInfo.node.value.entryType === 'L') ?
                <span
                  style={{padding: '0 0 0 15px'}}
                  className={options.className}
                >
                  <Button
                    onClick={(event) => handleCatalogAction(event, 'createLibrary')}
                    className={classes.button}
                  >
                    <CreateLibraryIcon style={{color: '#68de86'}} />
                    <span className={classes.item}>Create Library</span>
                  </Button>
                </span> : null
            }
          </>
        );
      },
    }
  ];
  
  return (
    <>
      <ContextMenu
        model={menu}
        ref={contextMenu}
        onHide={() => setSelectedNodeKey(null)}
        className={classes.contextMenu}
      />
    </>
  );
}

export default DemoContextMenu

Answer 1

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

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

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

Primereact tree context menu not hiding after an action

reactjs

primereact