如何捕获Metronic 8 React主题中Drawer的隐藏事件？

Metronic 8的Drawer基于KTDrawer插件实现，你可以通过两种方式捕获它的隐藏事件：

方式一：监听原生KTDrawer插件事件 #

如果你是用原生HTML+data属性的方式定义Drawer（就像你提供的代码那样），可以通过获取插件实例并监听hide事件：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    // 定位Drawer元素
    const drawerEl = document.getElementById('kt_drawer_notification');
    if (!drawerEl) return;

    // 获取已初始化的KTDrawer实例（Metronic会自动通过data属性初始化）
    const drawer = window.KTDrawer.getInstance(drawerEl);
    if (!drawer) return;

    // 定义隐藏事件的处理函数
    const handleHide = () => {
      // 在这里执行你的自定义逻辑
      console.log("通知抽屉已关闭");
      // 比如：resetNotificationForm()、clearUnreadCount()等
    };

    // 绑定事件监听
    drawer.on('hide', handleHide);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      drawer.off('hide', handleHide);
    };
  }, []);

  return (
    // 你的Drawer代码
    <div
      id='kt_drawer_notification'
      className='bg-white'
      data-kt-drawer='true'
      data-kt-drawer-name='notification'
      data-kt-drawer-activate='true'
      data-kt-drawer-overlay='true'
      data-kt-drawer-width='{default:"100%", "sm": "403px"}'
      data-kt-drawer-direction='end'
      data-kt-drawer-toggle='#kt_drawer_notification_toggle'
      data-kt-drawer-close='#kt_drawer_notification_close'
    >
      {/* Drawer内部内容 */}
    </div>
  );
};

export default YourComponent;

方式二：使用Metronic React封装组件的props #

如果你的项目引入了Metronic官方的React封装组件（@metronic/react），可以直接通过onHide属性绑定回调：

import { Drawer } from '@metronic/react';

const YourComponent = () => {
  const handleDrawerHide = () => {
    // 执行自定义函数
    console.log("通知抽屉已关闭");
  };

  return (
    <Drawer
      id='kt_drawer_notification'
      name='notification'
      activate={true}
      overlay={true}
      width={{ default: '100%', sm: '403px' }}
      direction='end'
      toggle='#kt_drawer_notification_toggle'
      close='#kt_drawer_notification_close'
      onHide={handleDrawerHide}
    >
      {/* Drawer内部内容 */}
    </Drawer>
  );
};

export default YourComponent;

注意事项 #

• 确保在组件挂载完成后再获取KTDrawer实例，所以使用useEffect空依赖数组
• 组件卸载时必须移除事件监听，避免内存泄漏
• 如果你是通过data属性自动初始化的Drawer，无需手动调用new KTDrawer()，直接用getInstance获取已存在的实例即可

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