![](/img/trans.png)
[英]onClick event is not getting triggered on React Popover (Material UI)
[英]Material-UI popover triggered by onMouseOver is blocking onClick event of button - React.js
這是 Header.js,我有按鈕<ReactSvg>
,在<IconButton>
里面,當你點擊它時,它會用switchTheme()
函數改變頁面主題。 當您將鼠標懸停在按鈕上時,它還會有一個popover
,在其中聲明按鈕的功能(例如切換主題)。
出於某種原因,我將按鈕懸停在popover
,但即使我點擊速度非常快且用力,也不會讓我點擊該按鈕。 不知何故, popover
禁用了按鈕。
渲染按鈕的頭文件:
import React, { useState } from 'react'
import ReactSvg from './reactSvg'
import { Box, Typography, Link, Container, IconButton } from '@material-ui/core'
import PhoneIcon from '@material-ui/icons/Phone'
import EmailIcon from '@material-ui/icons/Email'
import GitHubIcon from '@material-ui/icons/GitHub'
import LinkedInIcon from '@material-ui/icons/LinkedIn'
import { useStyles } from '../styles/customStyles'
import Image from 'material-ui-image'
import PopOver from './PopOver'
const styles = {
image: {
maxWidth: 200,
minWidth: 200,
},
}
export default function Header({ switchTheme }) {
const classes = useStyles()
const [anchorEl, setAnchorEl] = useState(null)
const handleTheme = () => {
switchTheme()
}
const handleHover = (e) => {
setAnchorEl(e.currentTarget)
}
return (
<>
<Box>
<IconButton onClick={() => handleTheme()} onMouseOver={(e) => handleHover(e)}>
<ReactSvg />
</IconButton>
<Typography variant="h3" color="primary">
Staz Christodoulakis
</Typography>
<Typography variant="body1" color="primary">
Software Engineer · Web/App
</Typography>
<hr className="solid" />
<Box
display="flex"
alignItems="center"
justifyContent="center"
className={classes.root}
flexWrap="wrap"
>
<Link color="secondary" variant="body1" href="tel: 650-409-6202">
<Box display="flex">
<PhoneIcon /> 650 409 6202
</Box>
</Link>
<Link color="secondary" variant="body1" href="mailto: staz.christo@gmail.com">
<Box display="flex">
<EmailIcon /> staz.christo@gmail.com
</Box>
</Link>
<Link href="https://github.com/stazcp" color="secondary" variant="body1">
<Box display="flex">
<GitHubIcon /> github.com/stazcp
</Box>
</Link>
<Link href="https://www.linkedin.com/in/staz-christo" color="secondary" variant="body1">
<Box display="flex">
<LinkedInIcon /> linkedin.com/in/staz-christo
</Box>
</Link>
</Box>
</Box>
<PopOver anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
</>
)
}
彈出框:
import React, { useState, useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Popover from '@material-ui/core/Popover'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'
const useStyles = makeStyles((theme) => ({
typography: {
padding: theme.spacing(2),
},
}))
export default function SimplePopover({ anchorEl, setAnchorEl }) {
const classes = useStyles()
const handleClose = () => {
setAnchorEl(null)
}
const open = Boolean(anchorEl)
const id = open ? 'simple-popover' : undefined
return (
<div>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}
>
<Typography className={classes.typography}>
Click on React Symbol to change theme!
</Typography>
</Popover>
</div>
)
}
為什么 onMouseOver 事件會阻塞 onClick 事件?
你可以試試 stopPropagation 嗎?
const handleHover = (e) => {
e.stopPropagation();
setAnchorEl(e.currentTarget)
}
所以我通過使用 Material UI 提供的 Tooltip 找到了解決我的問題的方法。 https://material-ui.com/components/tooltips/
像這樣:
<Tooltip title="Click Me!" placement="right" arrow>
<IconButton
onClick={() => handleTheme()}
// onMouseOver={(e) => handleHover(e)}
>
<GetIcon icon={reactLogo} className="reactLogo" />
</IconButton>
</Tooltip>
如果有人設法對 Material UI 按鈕上的鼠標事件使用不同的方法,請在此處發布。 謝謝!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.