如何在MUI MenuItem组件内正常显示Dialog模态框

问题根源是点击MenuItem时，事件会冒泡到父级Menu组件，触发Menu的关闭流程，导致承载MenuItem和模态框的组件被卸载，模态框因此仅闪显一下就消失。要在组件内部封装全部逻辑的前提下解决这个问题，只需两步：

1. 把模态框的状态、打开/关闭逻辑完全封装到自定义MenuItem组件中
2. 在MenuItem的点击事件里阻止事件冒泡，避免触发父Menu的关闭

自定义封装后的组件代码 #

import { useState } from 'react';
import { MenuItem } from '@mui/material';
import ManualSyncModal from './ManualSyncModal';

const SyncMenuItem = ({ service }) => {
  const [showManualSyncModal, setShowManualSyncModal] = useState(false);

  const handleClick = (event) => {
    // 阻止事件向上冒泡，避免父级Menu关闭
    event.stopPropagation();
    setShowManualSyncModal(true);
  };

  return (
    <>
      <MenuItem
        style={{
          display: "flex",
          padding: "0.5vw 1vw",
        }}
        onClick={handleClick}
      >
        Sync Now
      </MenuItem>
      {showManualSyncModal && (
        <ManualSyncModal
          integrationType={service}
          showModal={setShowManualSyncModal}
        />
      )}
    </>
  );
};

export default SyncMenuItem;

代码说明 #

• 所有模态框的状态管理、触发逻辑都被封装在SyncMenuItem组件内部，外部使用时直接引入该组件即可，无需重复编写逻辑
• event.stopPropagation()会阻断点击事件向父级Menu传递，Menu不会因为点击这个MenuItem而关闭，模态框所在的组件也不会被卸载，因此能正常显示和交互

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