如何监听AG Grid React上下文菜单的关闭事件？

方法1：利用AG Grid内置的popupMenuClosed事件 #

AG Grid 原生提供了popupMenuClosed事件，所有弹出菜单（包括右键触发的上下文菜单）关闭时都会触发该事件。直接在Grid配置中监听即可：

<AgGridReact
  // 其他核心配置
  onPopupMenuClosed={() => {
    // 菜单关闭时执行你的逻辑
    console.log('上下文菜单已关闭');
  }}
/>

这个事件会覆盖所有关闭场景：点击菜单外部区域关闭、点击菜单选项后关闭等，无需额外区分场景。

方法2：自定义上下文菜单组件，在组件内监听关闭 #

如果需要精准区分上下文菜单和其他弹出菜单的关闭逻辑，可以自定义菜单组件，在组件内部处理关闭回调：

1. 在Grid配置中指定getContextMenuItems，返回自定义菜单组件：

const getContextMenuItems = (params) => {
  return [
    {
      component: CustomContextMenu,
      params: {
        onClose: () => {
          console.log('自定义上下文菜单已关闭');
        }
      }
    },
    // 其他默认菜单项
  ];
};

<AgGridReact
  // 其他配置
  getContextMenuItems={getContextMenuItems}
/>

2. 编写自定义菜单组件，利用React生命周期监听组件卸载（菜单关闭会触发组件卸载）：

const CustomContextMenu = ({ params }) => {
  useEffect(() => {
    // 组件卸载时触发关闭回调
    return () => {
      params.onClose();
    };
  }, [params]);

  return (
    <div className="custom-context-menu">
      <button>自定义菜单项1</button>
      <button>自定义菜单项2</button>
    </div>
  );
};

方法3：监听DOM事件（兜底方案） #

如果上述内置方案不满足需求，可以通过监听文档点击事件，结合AG Grid菜单的DOM类名判断：

useEffect(() => {
  const handleDocumentClick = (e) => {
    // AG Grid上下文菜单的默认类名为.ag-menu
    const menuElement = document.querySelector('.ag-menu');
    if (menuElement && !menuElement.contains(e.target)) {
      console.log('上下文菜单已关闭');
    }
  };

  document.addEventListener('click', handleDocumentClick);
  return () => {
    document.removeEventListener('click', handleDocumentClick);
  };
}, []);

注意：该方法依赖AG Grid的DOM类名，版本更新可能导致类名变化，仅作为兜底方案使用。

内容的提问来源于stack exchange，提问作者Falcoa