我试图添加一个模式，将鼠标悬停在div上时会延迟显示。但是，它变得有些棘手，因为，例如，如果超时间隔为1000ms，并且将鼠标悬停在该div上，然后在1000ms内将鼠标悬停在该div之外，则仍然会显示模式。我想发生的是，仅当您在该延迟时间内将鼠标悬停在div上时，模态才会在延迟（例如1000ms）之后显示。如何创建此效果而不是我现在看到的副作用？谢谢！
index.tsx：
import * as React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const Modal: React.FC = () => {
const divRef = React.useRef<HTMLDivElement>(null);
const [showModal, setShowModal] = React.useState<boolean>(false);
React.useEffect(() => {
const divNode = divRef.current;
const handleEvent = (event: Event): void => {
if (divNode) {
if (divNode.contains(event.target as Node)) {
setTimeout(() => setShowModal(true), 1000);
} else {
setShowModal(false);
}
}
};
document.addEventListener("mouseover", handleEvent);
return () => {
document.removeEventListener("mouseover", handleEvent);
};
}, [divRef]);
return (
<div className="container">
<div className="div" ref={divRef}>
Hover Me
</div>
{showModal && <div className="modal">modal</div>}
</div>
);
};
const App: React.FC = () => (
<>
<Modal />
<Modal />
<Modal />
<Modal />
</>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
您应该添加一个鼠标事件，它将隐藏模式。
在“ mouseout”事件侦听器上调用功能，并将showModal设置为false。这样，如果您随时移动鼠标，它将隐藏模式。
setShowModal(false)
更新：您还可以将超时设置为变量，然后在鼠标超时时触发clearTimeout（variable_that_set_to_timeout）
React.useEffect(() => {
const divNode = divRef.current;
let timeout = null;
const handleEvent = (event: Event): void => {
if (divNode) {
if (divNode.contains(event.target as Node)) {
timeout = setTimeout(() => setShowModal(true), 1000);
} else {
setShowModal(false);
}
}
};
const hideModal = (event: Event): void => {
clearTimeout(timeout);
setShowModal(false);
};
divNode.addEventListener("mouseover", handleEvent);
divNode.addEventListener("mouseout", hideModal);
return () => {
document.removeEventListener("mouseover", handleEvent);
};
}, [divRef]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句