Mui 弹出窗口，点击外部时禁用关闭

Question

我正在使用 Mui Popover 和 ReactJS， https://mui.com/material-ui/react-popover/

当用户用鼠标在弹出窗口外单击时，弹出窗口将关闭，

如何禁用此行为并添加一个带有“保存配置”的按钮，只有单击此按钮才会关闭弹出窗口？

Answer 1

您需要做的就是调整

open

属性的值，您将提供 Popover 组件。

当

onClose

事件触发时，仅在单击自定义按钮后更改其值，而不是反转其值。

我调整了 https://mui.com/material-ui/react-popover/ 中的 Basic Popover 示例代码来更改其行为：

import * as React from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
  const [open, setOpen] = React.useState(false);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
    toggleOpen();
  };

  const toggleOpen = () => {
    setOpen(!open);
  };

  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={() => undefined}
        anchorOrigin={{
          vertical: 'center',
          horizontal: 'center',
        }}
      >
        <Button onClick={toggleOpen}>
        <Typography sx={{ p: 2 }}>Close</Typography>
        </Button>
      </Popover>
    </div>
  );
}