只要鼠标悬停在 React 中的元素上，就会改变状态

Posted 2023-02-22

【中文标题】只要鼠标悬停在 React 中的元素上，就会改变状态

【英文标题】：Change state as long as mouse is over an element in React

【发布时间】：2020-08-27 23:08:47

【问题描述】：

我有一个计数器功能组件，有 2 个按钮：increment 和 decrement，目前，当它们被单击时，状态会发生变化。但我希望状态改变只要鼠标悬停在元素上。 （不像onMouseOver 在鼠标悬停时执行事件，然后当您将鼠标移出元素然后再次悬停在元素上时再次执行）。我希望它是一个持续的悬停事件。

这是我的counter 代码：

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>
  );

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

【问题讨论】：

upmostly.com/tutorials/…

可能我会尝试基于此SO question 的onMouseDown、onMouseEnter、onMouseLeave 事件。一个补充是我会在事件中包含一个去抖动，以免在一秒钟内触发多次，请参阅this one。

谢谢！我去看看。

【参考方案1】：

给你：

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

运行下面的代码sn-p，希望能解开你的疑惑。

const  useState , useEffect , useRef  = React;

const App = () => 

  const _intervalRef = useRef(null);
  const [startCounter,setStartCounter] = useState(false);
  const [counter,setCounter] = useState(0);

  useEffect(() => 
    if(startCounter) 
         _intervalRef.current = setInterval(() => 
          setCounter((counter) => counter+1);
      ,250);
     else 
      clearInterval(_intervalRef.current);
    
    return () => clearInterval(_intervalRef.current);
  ,[startCounter]);

  return (
    <div>
      <div onMouseOver=() => setStartCounter(true) onMouseOut=() =>setStartCounter(false)>
        HOVER ME TO START COUNTER :  counter 
      </div>

    </div>
  );


ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

【讨论】：

谢谢！这正是我想要的。

@Roy，很高兴它有帮助，:)