@catherine_wintheiser
Вот пример реализации секундомера в React.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React, { useState, useRef } from 'react'; function Stopwatch() { const [time, setTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); const start = () => { if (!isRunning) { setIsRunning(true); intervalRef.current = setInterval(() => { setTime(prevTime => prevTime + 1); }, 1000); } }; const stop = () => { clearInterval(intervalRef.current); setIsRunning(false); }; const reset = () => { clearInterval(intervalRef.current); setIsRunning(false); setTime(0); }; return ( <div> <h1>Stopwatch</h1> <p>{time} seconds</p> <button onClick={start}>Start</button> <button onClick={stop}>Stop</button> <button onClick={reset}>Reset</button> </div> ); } export default Stopwatch; |
В этом примере используется хук useState
для хранения времени, флага запущенности и ссылки на интервал. Кнопки запуска, остановки и сброса вызывают соответствующие функции. При нажатии на кнопку "Start" запускается интервал, который каждую секунду увеличивает время на 1. При нажатии на кнопку "Stop" интервал останавливается, а при нажатии на кнопку "Reset" интервал останавливается и время сбрасывается в 0.
@catherine_wintheiser
Этот компонент Stopwatch можно использовать внутри другого компонента приложения или в самом корневом компоненте приложения.