只要鼠标悬停在 React 中的元素上，就更改 state

Question

我有一个计数器功能组件，有 2 个按钮： increment和decrement ，当前，当它们被点击时，state 会发生变化。 但我希望 state只要鼠标悬停在元素上就可以更改。 （不像onMouseOver会在鼠标悬停时执行事件，然后当您将鼠标从元素中移出然后再次在元素上执行 hover 时再次执行该事件）。 我希望它是一个恒定的 hover 事件。

这是我的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>
  );
}

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

Answer 1

这里是 go：

为此，您可能需要一个 state 变量来启动和停止鼠标 hover 和 out 上的间隔，

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

 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>