Создайте простой компонент таймера обратного отсчета

Он отображает таймер обратного отсчета, который печатает сообщение при достижении нуля.

  1. Используйте деструктуризацию объекта, чтобы установить значения по умолчанию для реквизитов часов, минут и секунд.
  2. Используйте хук React.useState() для создания переменных состояния time, paused и over и установите их значения в значения переданных реквизитов, false и false соответственно.
  3. Создайте метод tick, который обновляет значение времени на основе текущего значения (т.е. уменьшает время на одну секунду).
  4. Если paused или over равно true, то tick вернется немедленно.
  5. Создайте метод reset, который возвращает все переменные состояния в исходное состояние.
  6. Используйте хук React.useEffect() для вызова метода tick каждую секунду с помощью setInterval() и используйте clearInterval() для очистки, когда компонент размонтирован.
  7. Используйте a, чтобы обернуть

    элемент с текстовым представлением переменной состояния времени компонента, а также два элемента, которые будут приостанавливать/отменять паузу и перезапускать таймер соответственно.

  8. Если значение over равно true, таймер будет отображать сообщение вместо значения времени.
  9. Код

    function CountDown({ hours = 0, minutes = 0, seconds = 0 }) {
      const [paused, setPaused] = React.useState(false);
      const [over, setOver] = React.useState(false);
      const [time, setTime] = React.useState({
        hours: parseInt(hours),
        minutes: parseInt(minutes),
        seconds: parseInt(seconds)
      });
    
      const tick = () => {
        if (paused || over) return;
        if (time.hours == 0 && time.minutes == 0 && time.seconds == 0) setOver(true);
        else if (time.minutes == 0 && time.seconds == 0)
          setTime({
            hours: time.hours - 1,
            minutes: 59,
            seconds: 59
          });
        else if (time.seconds == 0)
          setTime({
            hours: time.hours,
            minutes: time.minutes - 1,
            seconds: 59
          });
        else
          setTime({
            hours: time.hours,
            minutes: time.minutes,
            seconds: time.seconds - 1
          });
      };
    
      const reset = () => {
        setTime({
          hours: parseInt(hours),
          minutes: parseInt(minutes),
          seconds: parseInt(seconds)
        });
        setPaused(false);
        setOver(false);
      };
    
      React.useEffect(() => {
        let timerID = setInterval(() => tick(), 1000);
        return () => clearInterval(timerID);
      });
    
      return (
        <div>
          <p>{`${time.hours.toString().padStart(2, '0')}:${time.minutes
            .toString()
            .padStart(2, '0')}:${time.seconds.toString().padStart(2, '0')}`}</p>
          <div>{over ? "Time's up!" : ''}</div>
          <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>
          <button onClick={() => reset()}>Restart</button>
        </div>
      );
    }
    

    Теперь вы можете использовать его в своих React-приложениях.

    ReactDOM.render(<CountDown hours="1" minutes="45" />, document.getElementById('root'));
    

Оцените статью
Procodings.ru
Добавить комментарий