javascript - React.js 中鼠标单击时不断增加计数器

Question

我试图在 React.js 中实现计数器，它会在点击时连续增加值，但我没有得到适当的结果，代码在纯 html/js 中工作正常。

https://codesandbox.io/s/autumn-wood-fhsjx?file=/src/App.js

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

export default function App() {
  const [value, setValue] = useState(0);

  const continuosIncerment = () => {
    console.log(`Setting ${value}`);

    setValue(value + 1);

    timer = setTimeout(function() {
      continuosIncerment();
    }, 1000);
  };

  function timeoutClear() {
    clearTimeout(timer);
  }

  return (
    <div className="App">
      <button
        onMouseLeave={timeoutClear}
        onMouseUp={timeoutClear}
        onMouseDown={continuosIncerment}
      >
        Increment
      </button>
      <div>Value = {value} </div>
    </div>
  );
}

Answer 1

您可以使用setInterval、useRef和回调方法来更新状态来解决您的问题。

Working demo

代码片段

export default function App() {
  const [value, setValue] = useState(0);
  const timer = useRef(null);
  const increment = () => {
    timer.current = setInterval(() => setValue(prev => prev + 1), 500);
  };

  function timeoutClear() {
    clearInterval(timer.current);
  }

  return (
    <div className="App">
      <button
        onMouseLeave={timeoutClear}
        onMouseUp={timeoutClear}
        onMouseDown={increment}
      >
        Increment
      </button>
      <div>Value = {value} </div>
    </div>
  );
}