如何在悬停在anchorEl和“popover”上时继续显示“popover”？

Question

在这个https://material-ui.com/utils/popover/#mouse-over-interaction 的例子中material-ui

对于示例https://material-ui.com/utils/popover/#mouse-over-interaction，请按照以下步骤操作 material-ui

1. 在上面的示例中，将鼠标保持在文本上Hover with a Popover. --- 您会看到popover

2. 尝试将鼠标移到popover---附近popover消失，对吗？但即使我悬停在上面，我也想显示弹出框 popover

并使只有酥料饼的消失，如果用户未悬停在任popover或Hover with a Popover.（基本上anchorEl）

我正在从他们的演示中复制代码

  import React from 'react';
    import PropTypes from 'prop-types';
    import Popover from '@material-ui/core/Popover';
    import Typography from '@material-ui/core/Typography';
    import { withStyles } from '@material-ui/core/styles';

    const styles = theme => ({
      popover: {
        pointerEvents: 'none',
      },
      paper: {
        padding: theme.spacing.unit,
      },
    });

    class MouseOverPopover extends React.Component {
      state = {
        anchorEl: null,
      };

      handlePopoverOpen = event => {
        this.setState({ anchorEl: event.currentTarget });
      };

      handlePopoverClose = () => {
        this.setState({ anchorEl: null });
      };

      render() {
        const { classes } = this.props;
        const { anchorEl } = this.state;
        const open = Boolean(anchorEl);

        return (
          <div>
            <Typography
              aria-owns={open ? 'mouse-over-popover' : undefined}
              aria-haspopup="true"
              onMouseEnter={this.handlePopoverOpen}
              onMouseLeave={this.handlePopoverClose}
            >
              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={this.handlePopoverClose}
              disableRestoreFocus
            >
              <Typography>I use Popover.</Typography>
            </Popover>
          </div>
        );
      }
    }

    MouseOverPopover.propTypes = {
      classes: PropTypes.object.isRequired,
    };

    export default withStyles(styles)(MouseOverPopover);

我需要在这里进行哪些代码更改？你可以实验https://codesandbox.io/s/6l3wk6kv3

Answer 1

我遇到了同样的问题，没有找到任何答案，我花了一段时间才了解如何解决它。

实际上问题来自 pointerEvents: none 您需要在弹出窗口上防止您的 onMouseEnter/onMouseLeave 同时被触发。

但是您可以为 popover pointerEvents: auto 的内容设置。

然后你可以在弹出框的内容上添加一个 onMouseEnter 和一个 onMouseLeave 。

这是一个使其更明确的示例：

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

const useStyles = makeStyles(theme => ({
  popover: {
    pointerEvents: 'none',
  },
  popoverContent: {
    pointerEvents: 'auto',
  },
}));

const MyComponent = ({ loading, login, wrong, clearWrongLogin }: Props) => {
  const [openedPopover, setOpenedPopover] = useState(false)
  const popoverAnchor = useRef(null);

  const popoverEnter = ({ currentTarget }) => {
    setOpenedPopover(true)
  };

  const popoverLeave = ({ currentTarget }) => {
    setOpenedPopover(false)
  };

  const classes = useStyles();

return (
    <div>
         <span
          ref={popoverAnchor}
          aria-owns="mouse-over-popover"
          aria-haspopup="true"
          onMouseEnter={popoverEnter}
          onMouseLeave={popoverLeave}
        >Hover this el !
        </span>
        <Popover
        id="mouse-over-popover"
        className={classes.popover}
        classes={{
          paper: classes.popoverContent,
        }}
        open={openedPopover}
        anchorEl={popoverAnchor.current}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        PaperProps={{onMouseEnter: popoverEnter, onMouseLeave: popoverLeave}}
      >
        <div>
          My popover content...
        </div>
      </Popover>
    </div>
  );
};

export default MyComponent

Answer 2

在MUI v5中：

我搜索了很多解决方案，最简单的方法是使用"material-ui-popup-state". 一定要确定，因为这里是MUI引入的；

我做了一个完整的示例codesandbox

import * as React from 'react';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import PopupState, { bindTrigger, bindPopover ,bindHover } from 'material-ui-popup-state';
import HoverPopover from "material-ui-popup-state/HoverPopover";

export default function PopoverPopupState() {
    return (
        <PopupState variant="popover" popupId="demo-popup-popover">
            {(popupState) => (
                <div>
                    <Button variant="contained" {...bindHover(popupState)}>
                        Open Popover
                    </Button>
                    <HoverPopover
                        {...bindPopover(popupState)}
                        anchorOrigin={{
                            vertical: 'bottom',
                            horizontal: 'center',
                        }}
                        transformOrigin={{
                            vertical: 'top',
                            horizontal: 'center',
                        }}
                    >
                        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
                    </HoverPopover>
                </div>
            )}
        </PopupState>
    );
}

Answer 3

代码沙箱演示

setTimeout()我通过为事件添加一个函数来破解它onMouseLeave......我确信还有其他方法可以做到这一点，但这取决于您的具体需求

  handlePopoverClose = () => {
    setTimeout(() => { 
      this.setState({ anchorEl: null });
    }, 3000);
  };