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

这是我在我的应用程序中使用的计时器代码，也许它可以帮助你。它有一些 bootstrap 代码，我怎么不介意

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

function Clock() {
  const [isRunning, setIsRunning] = useState(false);
  const [seconds, setSeconds] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [hours, setHours] = useState(0);

  const toggleOn = () => {
    setIsRunning(!isRunning);
  };

  const reset = () => {
    setMinutes(0);
    setSeconds(0);
    setIsRunning(false);
    setHours(0);
  };

  useEffect(() => {
    let interval = null;
    if (isRunning) {
      interval = setInterval(() => {
        setSeconds((seconds) => seconds + 1);
      }, 1000);
      if (seconds > 60) {
        setMinutes((minutes) => minutes + 1);
        setSeconds(0);
      }
      if (minutes > 60) {
        setHours((hours) => {
          return hours + 1;
        });
        setMinutes(0);
      }
    } else if (!isRunning && seconds !== 0) {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [isRunning, seconds]);

  const formatedTime = () => {
    let formatedSeconds = seconds < 10 ? `0${seconds}` : seconds;
    let formatedMinutes = () => {
      if (hours >= 1) {
        if (minutes < 10) {
          return `0${minutes}`;
        } else return minutes;
      } else if (hours < 1) {
        return minutes;
      }
    };
    let formatedHours = hours < 1 ? " " : `${hours}:`;
    let formatedTime = `${formatedHours}${formatedMinutes()}:${formatedSeconds}`;
    return formatedTime;
  };

  return (
    <div className="clock">
      <h1>{formatedTime()}</h1>
      <div>
        <button className="btn btn-primary m-1" onClick={toggleOn}>
          {isRunning ? "Pause" : "Start"}
        </button>
        <button className="btn btn-primary m-1" onClick={reset}>
          Reset
        </button>
      </div>
    </div>
  );
}

export default Clock;

Answer 2

您可以使用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>
  );
}

React.js 鼠标点击持续增加计数器

Increment counter continuously on mouse click in React.js

javascript

event-handling

dom-events

reactjs