Постоянно увеличивать счетчик при щелчке мыши в 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 и подход обратного вызова для обновления состояния, чтобы решить вашу проблему.

Рабочая демонстрация

Фрагмент кода

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>
  );
}

Answer 2

Это код таймера, который я использовал в своем приложении, возможно, он вам поможет. Там какой-то код 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;