英文:
Focusing on Popper activated on MouseOver
问题
我的Popper在鼠标悬停时激活，并在鼠标移出时停用）。
我的弹出窗口包含一个用户可以点击的链接。
问题是，一旦我移出弹出窗口，它就会消失，我无法找到一种方法让它保持打开，以便用户可以点击链接。
以下是简化的代码：
import "./styles.css";
import React, { useState } from "react";
import { Box, Popper } from "@mui/material";
export default function App() {
const [el, setEl] = useState<(EventTarget & Element) | null>(null);
const [inBox, setBox] = useState(false);
const handle1 = (e: React.MouseEvent) => {
if (inBox) return;
console.log("enter");
setEl(e.currentTarget);
};
const handle2 = () => {
if (inBox) return;
console.log("close");
setEl(null);
};
const open = !!el;
return (
<Box>
<Box
component="div"
sx={{
backgroundColor: "red",
width: "100px",
height: "100px"
}}
onMouseOver={(e) => handle1(e)}
onMouseOut={handle2}
/>
{open && (
<Popper open={open} anchorEl={el} placement="bottom-start">
<Box
sx={{
backgroundColor: "green",
width: "170px",
height: "70px"
}}
onMouseOver={() => {
console.log("ENTERING");
setBox(true);
}}
onMouseOut={() => {
setBox(false);
}}
/>
</Popper>
)}
<Box
onMouseEnter={handle1}
onMouseLeave={handle2}
sx={{
backgroundColor: "blue",
width: "100px",
height: "100px"
}}
/>
</Box>
);
}
英文:
I have a Popper activated on mouseOver and deactivated on mouseOut).
My popper contains a link for a user to click on.
The problem is that as soon as I move out of the popper, it disappears and I cannot figure out a way to keep it open for a user to click a link.
The simplified code is below:
import "./styles.css";
import React, { useState } from "react";
import { Box, Popper } from "@mui/material";
export default function App() {
const [el, setEl] = useState<(EventTarget & Element) | null>(null);
const [inBox, setBox] = useState(false);
const handle1 = (e: React.MouseEvent) => {
if (inBox) return;
console.log("enter");
setEl(e.currentTarget);
};
const handle2 = () => {
if (inBox) return;
console.log("close");
setEl(null);
};
const open = !!el;
return (
<Box>
<Box
component="div"
sx={{
backgroundColor: "red",
width: "100px",
height: "100px"
}}
onMouseOver={(e) => handle1(e)}
onMouseOut={handle2}
/>
{open && (
<Popper open={open} anchorEl={el} placement="bottom-start">
<Box
sx={{
backgroundColor: "green",
width: "170px",
height: "70px"
}}
onMouseOver={() => {
console.log("ENTERING");
setBox(true);
}}
onMouseOut={() => {
setBox(false);
}}
/>
</Popper>
)}
<Box
onMouseEnter={handle1}
onMouseLeave={handle2}
sx={{
backgroundColor: "blue",
width: "100px",
height: "100px"
}}
/>
</Box>
);
}
答案1
得分: 1
我并没有完全理解你想要的内容。但我猜你想要在鼠标悬停在"Popper"显示框上时显示另一个框，并在鼠标移出时隐藏它，对吗？
import React, { useRef, RefObject, useEffect, useState } from "react";
const Popper = () => {
const divEl1 = useRef<HTMLDivElement>();
const divEl2 = useRef<HTMLDivElement>();
const [isOver, setIsOver] = useState<boolean>(false);
useEffect(() => {
const { current } = divEl1;
if (current) {
current.addEventListener("mouseover", () => setIsOver(true));
current.addEventListener("mouseout", () => setIsOver(false));
return () => {
current.removeEventListener("mouseover", () => setIsOver(true));
current.removeEventListener("mouseout", () => setIsOver(false));
};
}
}, [divEl1]);
return (
<div>
<div ref={divEl1 as RefObject<HTMLDivElement>}>Popper</div>
<div style={{ display: isOver ? "block" : "none" }} ref={divEl2 as RefObject<HTMLDivElement>}>
Show/NotShow
</div>
</div>
);
};
export default Popper;
请注意，我已经添加了"mouseout"事件监听器，并在适当的时候移除了它们，以确保正常工作。
英文:
I didn't perfectly understand what you want. But, I guess you want to do that mouseover at popper show Box & mouseout on Box disappear box? Right?
import React, { useRef, RefObject, useEffect } from "react";
const Popper = () => {
const divEl1 = useRef<HTMLDivElement>();
const divEl2 = useRef<HTMLDivElement>();
const [isOver,setIsOver] = useState<boolean>(false);
useEffect(() => {
const { current } = divEl1;
if(current) {
current.addEventListener("mouseover", () => setIsOver(true));
current.removeEventListener("mouseover", () => setIsOver(true));
}
}, [divEl1]);
useEffect(() => {
const { current } = divEl2;
if(current) {
current.addEventListener("mouseout", () => setIsOver(false));
current.removeEventListener("mouseout", () => setIsOver(false));
}
}, [divEl2]);
return (
<div >
<div ref={divEl1 as RefObject<HTMLDivElement>}>
Popper
</div>
<div style={{display : isOver ? "block" : "none"}} ref={divEl2 as RefObject<HTMLDivElement>}>
Show/NotShow
</div>
</div>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论