时间戳

首页 > 解决方案 > 只要鼠标悬停在 React 中的元素上，就会改变状态

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

问题描述

我有一个带有 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>
  );
}

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

标签： javascriptreactjs

解决方案

干得好 ：

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

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

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>

推荐阅读