javascript - React-timer 中的解析时间

Question

不幸的是，我无法解析计时器中的时间。

我有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。

谢谢!

更新(组件的完整代码)。

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 () {
	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