如何在选中Material UI下拉菜单选项后触发对应Modal弹窗

解决方案 #

现有代码存在冗余设计，Menu组件本身支持选项点击交互，无需嵌套Select组件，你可以按以下步骤修改实现选中条目触发对应Modal的效果：

步骤1：导入弹窗相关依赖 #

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';

步骤2：新增状态管理弹窗与选中值 #

在组件内新增两个状态，分别控制弹窗显隐、存储当前选中的操作选项：

// 原有状态保留，新增以下状态
const [openModal, setOpenModal] = useState(false);
const [selectedOption, setSelectedOption] = useState('');

步骤3：新增菜单选项点击处理逻辑 #

新增点击MenuItem的处理函数，在点击时记录选中值、打开弹窗、关闭下拉菜单：

const handleMenuItemClick = (option: string) => {
  setSelectedOption(option);
  setOpenModal(true);
  handleClose();
};

步骤4：调整菜单渲染逻辑 #

删除Menu内嵌套的Select组件，直接渲染MenuItem并绑定点击事件：

<Menu
  id="long-menu"
  MenuListProps={{
    'aria-labelledby': 'long-button'
  }}
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
  PaperProps={{
    style: {
      maxHeight: ITEM_HEIGHT * 4.5,
      width: '20ch'
    }
  }}
>
  {options.map(option => (
    <MenuItem key={option} onClick={() => handleMenuItemClick(option)}>
      {option}
    </MenuItem>
  ))}
</Menu>

步骤5：加入弹窗组件 #

在return的最后加入Dialog组件，根据选中的选项渲染对应内容：

<Dialog open={openModal} onClose={() => setOpenModal(false)}>
  <DialogTitle>
    {selectedOption === '删除' ? '确认删除' : selectedOption}
  </DialogTitle>
  <DialogContent>
    {selectedOption === '删除' ? <p>确认要删除该条目吗？</p> : <p>你选中了「{selectedOption}」操作</p>}
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setOpenModal(false)}>取消</Button>
    <Button onClick={() => {
      // 此处写入对应操作的业务逻辑，比如删除接口请求
      console.log('执行操作：', selectedOption);
      setOpenModal(false);
    }}>确认</Button>
  </DialogActions>
</Dialog>

扩展优化 #

如果需要支持更灵活的操作配置，可以把props里的options从字符串数组改成包含操作标识、显示文本、处理函数的对象数组，避免在组件内写大量条件判断匹配不同操作的逻辑。

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