只要鼠標懸停在 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>