Question

在此示例const jokeComponents = jokesData.map(function(joke) { return ( <Joke obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}} key={joke.id) /> ) }) WorkManager

中

对于示例material-ui https://material-ui.com/utils/popover/#mouse-over-interaction

，请按照以下步骤操作

在上面的示例中，将鼠标置于文本material-ui上 ---您看到Hover with a Popover.
尝试将鼠标移到popover附近--- popover消失了吗？但是，即使我将鼠标悬停在popover

仅当用户未悬停在popover或popover（基本上是anchorEl）上时，弹出弹出窗口才会消失

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

Hover with a Popover.

我需要在此处进行哪些代码更改？您可以尝试https://material-ui.com/utils/popover/#mouse-over-interaction

Answer 1

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

实际上，问题出在pointerEvents上：不需要在弹出窗口上进行任何操作，以防止同时触发onMouseEnter / onMouseLeave。

但是您可以设置弹出式指针事件的内容：自动。

然后，您可以在弹出窗口的内容上添加onMouseEnter和onMouseLeave。

这里是一个使它更明确的例子：

messaging.onMessage((payload) => {
    var data = null;

    if( typeof payload.data === 'undefined'){
        data = payload.notification;
    }else{
        data = payload.data;
    }
    myFunction(data)/*Do something in my web, update a litle text*/
    console.log('Message received. ', payload);
});

Answer 2

codesandbox DEMO

我通过为NLD事件添加setTimeout()函数来破解它的方法……我相信还有其他方法可以做到，但这取决于您的特定需求

onMouseLeave

Answer 3

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: {
    pointerEvents: "auto",
    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 onMouseEnter={handlePopoverOpen} onMouseLeave={handlePopoverClose}>
      <Typography
        aria-owns={open ? "mouse-over-popover" : undefined}
        aria-haspopup="true"
      >
        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>
  );
}

Answer 4

感谢this answer。小心使用 pointerEvents: 'none' 和 pointerEvents: 'auto' 才能真正发挥作用。

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

4 个答案: