Material-UI Popover 组件确实触发了 onClose 事件答案

【问题标题】：Material-UI Popover component does trigger onClose eventMaterial-UI Popover 组件确实触发了 onClose 事件
【发布时间】：2020-02-13 04:11:12
【问题描述】：

我正在使用Material-ui Popover组件，Popover组件的打开由它的状态处理，我定义了一个名为handlePopoverClose的函数来处理当我点击'Hover with a Popover'外部时，它应该设置状态将anchorEl 设为null，然后open 状态应变为false。但是这个函数动作没有触发，有没有人知道是怎么回事？

import React from 'react';
import Popover from '@material-ui/core/Popover';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  popover: {
    pointerEvents: 'none',
  },
  paper: {
    padding: theme.spacing(1),
  },
}));

export default function MouseOverPopover() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);

  return (
    <div>
      <Typography
        aria-owns={open ? 'mouse-over-popover' : undefined}
        aria-haspopup="true"
        onMouseEnter={handlePopoverOpen}
      >
        Hover with a Popover.
      </Typography>
      <Popover
        id="mouse-over-popover"
        className={classes.popover}
        classes={{
          paper: classes.paper,
        }}
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        onClose={handlePopoverClose}
        disableRestoreFocus
      >
        <Typography>I use Popover.</Typography>
      </Popover>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您只需从样式中删除以下代码：

popover: {
    pointerEvents: 'none',
  }

它将开始正常工作。现场演示：https://codesandbox.io/s/boring-snow-k6x1d

【讨论】：