第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

由 onMouseOver 觸發(fā)的 Material-UI 彈出窗口阻止按鈕的 onClick 事件

由 onMouseOver 觸發(fā)的 Material-UI 彈出窗口阻止按鈕的 onClick 事件

浮云間 2023-08-18 16:41:54
這是 Header.js,其中有按鈕<ReactSvg>,<IconButton>當(dāng)您單擊它時(shí),它將使用該switchTheme()功能更改頁面主題。當(dāng)您將鼠標(biāo)懸停在按鈕上時(shí),它還有一個(gè)popover聲明按鈕功能的位置(例如切換主題)。由于某種原因,我將鼠標(biāo)懸停popover在出現(xiàn)的按鈕上,但即使我單擊得非??烨矣辛?,也不讓我單擊該按鈕。不知何故,該popover按鈕已禁用。呈現(xiàn)按鈕的頭文件: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>為什么 onMouseOver 事件會(huì)阻塞 onClick 事件?
查看完整描述

2 回答

?
夢(mèng)里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊

因此,我通過使用 Material UI 提供的工具提示找到了解決問題的方法。

像這樣:

<Tooltip title="Click Me!" placement="right" arrow>

? ? ? <IconButton

? ? ? ? onClick={() => handleTheme()}

? ? ? ? // onMouseOver={(e) => handleHover(e)}

? ? ? >

? ? ? ? <GetIcon icon={reactLogo} className="reactLogo" />

? ? ? </IconButton>

? ? </Tooltip>

如果有人設(shè)法在 Material UI 按鈕上使用不同的鼠標(biāo)事件方法,請(qǐng)?jiān)诖颂幇l(fā)布。謝謝!


查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
絕地?zé)o雙

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超4個(gè)贊

你能嘗試stopPropagation嗎?


  const handleHover = (e) => {

    e.stopPropagation();

    setAnchorEl(e.currentTarget)

  }


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 2 回答
  • 0 關(guān)注
  • 204 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)