ReactJS中Mui Popover禁用外部点击关闭并添加保存按钮关闭的方法

1. 禁用自动关闭行为 #

MUI Popover默认支持点击外部或按ESC键关闭，要禁用这些自动关闭逻辑，只需给组件添加两个props：

• disableOutsideClick={true}：直接禁用点击Popover外部区域的关闭行为
• disableEscapeKeyDown={true}：可选，若需要同时禁用ESC键触发的关闭，就加上这个配置

2. 用状态控制Popover显隐 #

需要通过React状态来手动控制Popover的open属性，比如用useState钩子维护一个状态变量，来决定Popover的显示与隐藏。

3. 添加“保存配置”按钮并实现关闭逻辑 #

在Popover的内容区域内添加按钮，点击按钮时执行保存逻辑，再手动更新状态关闭Popover。

完整示例代码 #

import React, { useState, useRef } from 'react';
import { Popover, Button, Box } from '@mui/material';

export default function ConfigPopover() {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const anchorRef = useRef(null);

  const handleSaveConfig = () => {
    // 这里写入你的配置保存逻辑
    console.log('配置已保存');
    // 手动关闭Popover
    setIsPopoverOpen(false);
  };

  return (
    <div>
      {/* 触发Popover的按钮，绑定ref作为锚点 */}
      <Button 
        ref={anchorRef}
        onClick={() => setIsPopoverOpen(true)}
      >
        打开配置面板
      </Button>

      <Popover
        open={isPopoverOpen}
        anchorEl={anchorRef.current}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
        disableOutsideClick={true}
        disableEscapeKeyDown={true}
      >
        <Box sx={{ width: 300, p: 3 }}>
          <p>这里放置你的配置项内容</p>
          {/* 保存配置按钮 */}
          <Button 
            variant="contained" 
            onClick={handleSaveConfig}
            sx={{ mt: 2 }}
          >
            保存配置
          </Button>
        </Box>
      </Popover>
    </div>
  );
}

关键提示 #

• 必须通过状态变量（比如isPopoverOpen）控制open属性，才能实现手动关闭
• disableOutsideClick是禁用外部点击关闭的核心配置，按需搭配disableEscapeKeyDown即可完成需求

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