Material-UI onMouseOver 触发的弹出窗口正在阻止按钮的 onClick 事件 - React.js

Question

这是Header.js，我在<IconButton>里面有按钮<ReactSvg>，当你点击它时，它会用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 事件？

Answer 1

你能试试 stopPropagation 吗？

  const handleHover = (e) => {
    e.stopPropagation();
    setAnchorEl(e.currentTarget)
  }

Answer 2

因此，我使用 Material UI 提供的工具提示找到了解决问题的方法。 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 按钮上使用不同的鼠标事件方法，请在此处 post。谢谢！

Material-UI onMouseOver 触发的弹出窗口正在阻止按钮的 onClick 事件 - React.js

Material-UI popover triggered by onMouseOver is blocking onClick event of button - React.js

javascript

onmouseover

popover

reactjs

material-ui