Обзор

Итак, в первой части мы рассмотрели базовую настройку рендеринга и запуск/остановку таймера вместе с методами рендеринга React и тем, как элементы будут рендериться за кулисами, теперь нам нужно закончить таймер, реализовав время сброса и захвата, также мы собираемся поговорить о конкатенации массивов в ES6 и React, а также о зацикливании и рендеринге в JSX (React).

Итак, давайте закончим наш таймер на основе React.

Сброс таймера

По сути, сброс возвращает все обратно в состояние по умолчанию, которое в данном случае является нулевым для часов, минут и секунд, а также мы очищаем захват времени, если он есть.

Итак, начните с добавления обработчика кликов, затем установите текущее состояние на 0 и сбросьте таймер, запущенный и остановленный логическими значениями.

handleTimerReset() {
  this.setState({
    timerStarted: false,
    timerStopped: true,
    seconds: 0,
    minutes: 0,
    hours: 0,
    captures: []
  });
  clearInterval(this.timer);
}

Нам также нужно очистить текущий интервал таймера, чтобы, когда мы снова запустим таймер, у нас не возникло проблемы со счетом.

Очень хорошо, обязательно добавьте прослушиватель событий при нажатии кнопки сброса.

render() {
   ...
    <button className="btn btn-danger" onClick={this.handleTimerReset.bind(this)}>Reset!</button>
   ...
}

Теперь вы можете войти в таймер и попытаться запустить его, а затем сбросить его, вы должны все очистить для вас, чтобы вы могли снова использовать таймер, Круто!

Захват времени

Захват времени означает, что когда таймер работает, и у нас происходит что-то особенное в это конкретное время, поэтому мы можем зафиксировать его и сохранить, в этом случае это будет очень просто, в более сложном примере вы можете добавить возможность добавить пользовательское сообщение при попытке зафиксировать время, но на данный момент это должно отлично сработать для нас.

handleTimerCapture() {
  this.setState(prevState => ({
    captures: [
      ...prevState.captures,
      this.state.hours + ":" + this.state.minutes + ":" + this.state.seconds
    ]
  }));
}

Здесь мы получаем предыдущий массив захватов и объединяем его с новым массивом, где мы также помещаем новую отметку времени, которую мы хотим захватить, во вновь созданный массив, это делает то же самое, что мы использовали бы метод push для объекта массива, но при реагировании это должно быть сделано таким образом, поэтому мы не потеряем ранее захваченные временные метки, вместо этого мы поместим новую в предыдущий массив, и в этом случае мы добавим 3 точки к началу массива захватов, чтобы ES6 теперь это мы объединяем два массива.

Кроме того, нам нужно отобразить его в DOM, поэтому где-то в верхней части таймера

render() {
  ...
   <div className="timer-captures">
     { this.state.captures.map((time, index) => {
        return <code>{ "Capture " + ( index + 1 ) + " -- " + time }</code>
     })}
   </div>
  ...
}

Итак, что мы обычно делаем, это перебираем массив с помощью оператора for или while и отображаем каждую временную метку, в JSX вы не можете использовать for или while для представления этого, вместо этого мы используем метод карты под объектом массива, который позволяет нам зацикливаться через каждый элемент в массиве и визуализировать его (возвратить новый элемент), и здесь мы используем контейнер блока кода только для небольшого стиля, вы можете поместить его в любой контейнер элемента.

Метод карты принимает обратный вызов, который также дает нам текущий элемент и индекс текущей итерации, не забудьте заключить его в фигурные скобки, чтобы JSX знал, что мы используем операцию вместо HTML.

Последнее, что нужно сделать, это добавить прослушиватель событий под кнопку захвата.

...
<button className="btn btn-info" onClick={this.handleTimerCapture.bind(this)}>Capture Time</button>
...

Вот и все. Теперь наше приложение готово, и мы можем использовать таймер.

Что дальше

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