反應計時器中的解析時間

不幸的是，我無法解析計時器中的時間。反應計時器中的解析時間

我redusers它：代碼

部分

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

而且我有這個部分我的組件：代碼

部分

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

我試圖使用MomentJS，但不能正常工作。

現在我有計數器1-2-3-4 ...，但我需要這種格式00:00:00。

謝謝！

Upd（組件的完整代碼）。

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

來源

2017-02-23 Valeria Shpiner

只要做到這一點香草：

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")壽ld工作。

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

moment display docs

來源

2017-02-23 21:05:21 Joe

stange，但它沒有幫助。我從'react-moment''輸入了我的時刻'輸入時刻，並按照你的建議重寫了這部分代碼，並且控制檯顯示奇怪的錯誤：'Can not call a class as a function' –

你可以在原始文章中編輯完整代碼的組件？您遇到的錯誤可能是由組件級別的錯誤導致的。（或者它可能是您嘗試導入的代碼的問題，這裏有幾種可能性）。 –

@DenTemple當然，我更新了。 –

我也找到辦法解決它：

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>

感謝您對您的幫助！

來源

2017-02-24 09:01:42

反應計時器中的解析時間

回答

相關問題