由 onMouseOver 触发的 Material-UI 弹出窗口阻止按钮的 onClick 事件

Question

这是 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: [phone]">

            <Box display="flex">

              <PhoneIcon /> 650 409 6202

            </Box>

          </Link>

为什么 onMouseOver 事件会阻塞 onClick 事件？

Answer 1

因此，我通过使用 Material UI 提供的工具提示找到了解决问题的方法。像这样：<Tooltip title="Click Me!" placement="right" arrow>      <IconButton        onClick={() => handleTheme()}        // onMouseOver={(e) => handleHover(e)}      >        <GetIcon icon={reactLogo} className="reactLogo" />      </IconButton>    </Tooltip>如果有人设法在 Material UI 按钮上使用不同的鼠标事件方法，请在此处发布。谢谢！

Answer 2

你能尝试stopPropagation吗？&nbsp; const handleHover = (e) => {&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; setAnchorEl(e.currentTarget)&nbsp; }