リアクションタイマーの解析時間

Question

不幸なことに、私はタイマーで時間を解析できません。コードの

一部

case START_TIMER: { 
    const todo = { ...state.todos.find(item => item.id === action.id) }; 
    todo.startTime = new Date(); 
    const todos = [...state.todos].map(item => item.id === action.id ? todo : item); 
    return { ...state, timerActive: true, timerTodo: action.id, todos }; 
} 
case STOP_TIMER: { 
    return { ...state, timerActive: false, timerTodo: null } 
} 
case UPDATE_TODO_TOTAL: { 
    const todo = { ...state.todos.find(item => item.id === action.id) }; 
    todo.total += 1; 
    const todos = [...state.todos].map(item => item.id === action.id ? todo : item); 
    const total = state.total || 0; 
    return { ...state, todos, total: total + 1 }; 
} 

とも私は私のコンポーネントで、この部分があります：

私はそれのためredusersを持っているコードの

一部を

<span style={{ display: 'block', fontSize: 20 }}>{todo.total}</span> 

私はMomentJSを使用しようとしましたが、正しく動作していません。

今のところ私はカウンタ1-2-3-4を持っていますが、このフォーマットは00:00:00が必要です。

ありがとうございます！

更新（コンポーネントの完全なコード）。

import React, { Component, PropTypes } from 'react' 
import classnames from 'classnames' 
import moment from 'react-moment' 


let interval; 

export default class TodoItem extends Component { 
    static propTypes = { 
    todo: PropTypes.object.isRequired, 
    deleteTodo: PropTypes.func.isRequired, 
    completeTodo: PropTypes.func.isRequired 
    } 

    componentWillUnmount() { 
    clearInterval(interval); 
    } 

    handleDeleteClick =() => { 
    this.props.deleteTodo(this.props.todo.id); 
    } 

    handleCompleteClick =() => { 
    this.props.completeTodo(this.props.todo.id); 
    } 

    handleStartClick =() => { 
    this.props.startTimer(this.props.todo.id); 
    interval = setInterval(() => { 
     this.props.updateTimer(this.props.todo.id); 
    }, 1000); 
    } 


    handleStopClick =() => { 
    this.props.stopTimer(this.props.todo.id); 
    clearInterval(interval); 
    } 


    render() { 
    const { todo, timerActive, timerTodo } = this.props 

    return (
     <li className={classnames({ 
     completed: todo.completed 
     })}> 
     <div className="view" style={{ display: 'flex', alignItems: 'center' }} onClick={this.handleSelectToDo}> 
      <input 
      className="toggle" 
      type="checkbox" 
      checked={todo.completed} 
      onChange={this.handleCompleteClick} 
      /> 
      <label style={{ width: '50%' }}> 
      {todo.text} 
      </label> 
      <span style={{ display: 'block', fontSize: 20 }}>{todo.total}</span> 
      {(!timerActive || timerTodo === todo.id) && (
      <button 
       style={{ 
       background: 'transparent', 
       border: 0, 
       outline: 0, 
       fontSize: 12, 
       cursor: 'pointer', 
       marginLeft: 30 
       }} 
       disabled={timerActive && timerTodo !== todo.id} 
       onClick={timerActive ? this.handleStopClick : this.handleStartClick} 
      >{timerActive ? 'Stop' : 'Start'}</button> 
     )} 
      <button className="destroy" onClick={this.handleDeleteClick} /> 
     </div> 
     </li> 
    ) 
    } 
} 

Answer 1

ちょうどそれを行うバニラ：

const {total} = todo.total; 
const timerDisplay = ('0' + ((total/3600)|0)%60) + ':' + ('0'+ ((total/60)|0)%60).substr(-2) + ':'+('0' + total%60).substr(-2); 
<span style={{ display: 'block', fontSize: 20 }}>{timerDisplay}</span> 

---

またはインポート瞬間

var seconds = 0; 
 
setInterval(function() { 
 
\t var total = moment().startOf('day').seconds(seconds++).format("HH[:]mm[:]ss"); 
 
    document.getElementById('display').innerText = total; 
 
}, 100);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> 
 
<div id="display"> 
 

 
</div>

moment().startOf('day').seconds(120).format("HH[:]mm[:]ss")寿仕事。

<span style={{ display: 'block', fontSize: 20 }}>{moment().startOf('day').seconds(120).format("HH[:]mm[:]ss")}</span> 

moment display docs

Answer 2

また、私はそれを修正する方法を見つける：

formatSeconds = (seconds) => { 
     let hours = Math.floor(seconds/3600); 
     seconds = seconds % 3600; 

     let minutes = Math.floor(seconds/60); 
     seconds = seconds % 60; 

     return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds; 
    } 

と

<span style={{ display: 'block', fontSize: 16 }}>Total time is {this.formatSeconds(todo.total)}</span> 

は、すべてのあなたの助けをありがとう！