时间戳

首页 > 解决方案 > 超时功能中的条件不起作用

javascript - 超时功能中的条件不起作用

问题描述

我有以下代码，我试图在用鼠标悬停在 div 上时增加它的高度。我想设置一个超时时间，以便在取消悬停时延迟关闭。为了避免当鼠标回到它上面时 div 关闭，我创建了 mouseon 状态，它正在相应地调整，但由于某种原因，它似乎没有在超时功能中调整。为什么？

function Component (props) {

    const [large, setLarge] = useState(false);
    const [mouseon, setMouseon] = useState()

    const handleMouseEnter = () => {
        document.getElementById(`medium`).style.height = '800px';
        setLarge(true);
        setMouseon(true)
    }

    const handleMouseLeave = () => {
        setMouseon(false);
        setTimeout(()=>{
            if(!mouseon){
                document.getElementById(`medium`).style.height = '0px';
                setLarge(false);
            }
        }, 1000);
    }

return (<>
        
                <div id={`medium`}>
                    Something something text
                    {mouseon ? "mouseon" : 0}
                </div>
        </>
    )
}

标签： javascriptreactjsconditional-statementstimeout

解决方案

这是因为当你调用 setTimeout 时你的鼠标状态没有改变。您可以使用 useEffect 检查状态 mouseon 是否已更改并调用 setTimeout。

const handleMouseLeave = () => {
  setMouseon(false);
};

useEffect(() => {
  setTimeout(() => {
    if (!mouseon) {
      document.getElementById(`medium`).style.height = "0px";
      setLarge(false);
    }
  }, 1000);
}, [mouseon]);

推荐阅读