javascript - 如何在悬停在 anchorEl 和“popover”上时继续显示“popover”?
问题描述
在此material-ui
https://material-ui.com/utils/popover/#mouse-over-interaction示例中
请按照以下步骤操作示例 material-ui
https://material-ui.com/utils/popover/#mouse-over-interaction
在上面的示例中,将鼠标放在文本上
Hover with a Popover.
--- 你会看到popover
试着把你的鼠标移近
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
解决方案
我有同样的问题,没有找到任何答案,我花了一段时间来了解如何解决它。
实际上,问题来自pointerEvents: none 你需要在popover 上防止你的onMouseEnter/onMouseLeave 同时被触发。
但是您可以为弹出指针事件的内容设置: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
推荐阅读
- git - Git 推送 RPC 失败;HTTP 502 curl 22 The requested URL returned error: 502 Bad Gateway
- ssl - 如何配置 vsftpd 和 openssl 以避免索尼相机出现 TLS 不支持的协议错误
- java - IntelliJ 2020 能否将“可调用”lambda 函数提取到新创建的类中?
- java - 将增量子名添加到firebase,然后向其中添加数组
- java - java.net.URISyntaxException: Illegal character in query at index on JMETER
- algorithm - 这个算法有多复杂
- typescript - Typescript 中的类型定义
- android - 在最近发布的 Android chrome 87.0.4280.101 之后,Google Ads 在 Android 9 上崩溃了
- sabre - Sabre 入门 V3 AuthToken V3
- mysql - 如何从 mysql5 for windows 执行 os 命令?