Javascript 只要鼠标位于React中的某个元素上，就可以更改状态

我有一个计数器功能组件，有两个按钮：递增和递减，当前，当单击它们时，状态会发生变化。但是我希望只要鼠标在元素上，状态就会改变。与onMouseOver不同，onMouseOver在鼠标悬停时执行事件，然后将鼠标从元素中移出，然后再次将鼠标悬停在元素上。我希望它是一个持续的悬停事件

这是我的密码：

我希望这是有道理的！提前谢谢

给你：

为此，您可能需要一个状态变量来启动和停止鼠标悬停和退出的间隔

运行下面的代码片段，希望可以消除您的疑虑

const{useState，useffect，useRef}=React； 常量应用==>{ const\u intervalRef=useRefnull； 常量[startCounter，setStartCounter]=useStatefalse； const[counter，setCounter]=useState0； useEffect=>{ ifstartCounter{ _intervalRef.current=setInterval=>{ setCountercounter=>计数器+1； },250; }否则{ clearInterval_intervalRef.电流； } return=>clearInterval\u intervalRef.current； }，[startCounter]； 回来 setStartCountertrue}onMouseOut={=>SetStartCounterValse}> 将鼠标悬停以启动计数器：{COUNTER} ; } ReactDOM.render，document.getElementById'react-root'； 给你：

为此，您可能需要一个状态变量来启动和停止鼠标悬停和退出的间隔

运行下面的代码片段，希望可以消除您的疑虑

const{useState，useffect，useRef}=React； 常量应用==>{ const\u intervalRef=useRefnull； 常量[startCounter，setStartCounter]=useStatefalse； const[counter，setCounter]=useState0； useEffect=>{ ifstartCounter{ _intervalRef.current=setInterval=>{ setCountercounter=>计数器+1； },250; }否则{ clearInterval_intervalRef.电流； } return=>clearInterval\u intervalRef.current； }，[startCounter]； 回来 setStartCountertrue}onMouseOut={=>SetStartCounterValse}> 将鼠标悬停以启动计数器：{COUNTER} ; } ReactDOM.render，document.getElementById'react-root'；

---

可能我会尝试使用基于此的onMouseDown、onmousenter和onMouseLeave事件。另外一点是，为了避免在一秒钟内触发多次，我会在事件中加入一个去抖动，请参阅。谢谢！我来看看。也许我会尝试使用基于此的onMouseDown、onmousenter和onMouseLeave事件。另外一点是，为了避免在一秒钟内触发多次，我会在事件中加入一个去抖动，请参阅。谢谢！我来看看。谢谢！这正是我想要的。@Roy，很高兴它起了作用，：谢谢！这正是我想要的。@Roy，很高兴它起了作用，：

import React, { useState } from "react";
import "./styles.css";

export default function App() {

  const [counter, setCounter] = useState(0)

  return (
    <div className="App">
      <h1>{counter}</h1>
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
      <button onClick={() => setCounter(counter - 1)} disabled={counter < 1 ? true : false}>Decrement</button>
    </div>
  );
}