悬停在anchorEl和“ popover”上时,如何继续显示“ popover”? [英] How to keep showing the 'popover' on hovering on the anchorEl and 'popover' as well?
问题描述
在此示例中, material-ui
https://material-ui.com/utils/popover/#mouse-over-interaction
请按照以下步骤操作示例 material-ui
https ://material-ui.com/utils/popover/#mouse-over-interaction
Follow these steps for the example material-ui
https://material-ui.com/utils/popover/#mouse-over-interaction
-
在上面的示例将鼠标悬停在
带有弹出框的文本上。
---您会看到弹出框
尝试将鼠标移至弹出框
--- 弹出框
消失了吧?
但即使我将鼠标悬停在 popover
Try to move your mouse near the popover
--- popover
disappears right?
But I wanna show the popover even if I hover on popover
并且仅当用户未在弹出框
或带有弹出框的悬停上悬停时,才使弹出框消失。
(基本上是anchorEl)
And make popover disappear only if the user is not hovering on either popover
or the Hover with a Popover.
(basically anchorEl)
我正在从他们的演示中复制代码
I am copying code from their demo
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
What code change I need to make here? You may experiment https://codesandbox.io/s/6l3wk6kv3
推荐答案
我遇到了同样的问题,没有找到任何答案,我花了一些时间来了解如何解决它。
I had the same problem, didn't find any answer and I took a while to understand how to fix it.
实际上,问题出在pointerEvents:不需要在弹出窗口上阻止同时触发onMouseEnter / onMouseLeave。
Actually the problem comes from the pointerEvents: none that you need on the popover to prevent your onMouseEnter/onMouseLeave to be triggered at the same time.
但是您可以将弹出式指针事件的内容设置为:自动。
But you can set for the content of your popover pointerEvents: auto.
然后,您可以在弹出式窗口的内容上添加onMouseEnter和onMouseLeave。
Then you can add a onMouseEnter and a onMouseLeave on the content of your popover.
这里是一个使它更加明确的示例:
Here is an exemple to make it more explicit :
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
这篇关于悬停在anchorEl和“ popover”上时,如何继续显示“ popover”?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!