Question

我感到自己完全糊涂了，因为我仍然从昨天开始研究这个问题而没有任何帮助。所以，问题：我有待办事项清单。每个任务都有计时器。只有一个计时器可以同时工作，因此用户只能同时执行一项任务。我以为我可以做“开始”＃39;当其中一个计时器运行时，其他任务的按钮被禁用，但我认为我在我的setState中错了，因为所有计时器仍在一起运行=（我阅读文档，但对我没用。此外，我有文件TodoTextInput，它生成这些任务，我想也许我应该在这里粘贴我的计时器，但它很奇怪。

如需完整信息，请留下两个文件。谢谢你的帮助！

TodoItem （此处发布）

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'
import TodoTextInput from './TodoTextInput'

export default class TodoItem extends Component {
    constructor(props) {
    super(props);
    this.state = { secondsStart: this.props.minSeconds, timerRunning: false }
  }

    static propTypes = {
    todo: PropTypes.object.isRequired,
    deleteTodo: PropTypes.func.isRequired,
    completeTodo: PropTypes.func.isRequired,
  }

  static defaultProps = {
      minSeconds: 0
  }
  handleSave = (id, text) => {
    if (text.length === 0) {
      this.props.deleteTodo(id)
    }
  }

handleStartClick = () => {
    if (!this.state.timerRunning) {
      this.incrementer = setInterval(() => {
        this.setState({
          secondsStart: (this.state.secondsStart + 1)
        });
      }, 1000)
      this.setState({
        timerRunning: true,
        currentTodoId: this.props.todo.id,
        runningTodoId: this.props.todo.id
      });
    }
  }


  getSeconds = () => {
    return ('0' + this.state.secondsStart % 60).slice(-2)
  }

   getMinutes = () => {
    return Math.floor((this.state.secondsStart / 60)%60)
  }
    getHoures = () => {
    return Math.floor((this.state.secondsStart / 3600)%24)
  }


  handleStopClick = () => {
    clearInterval(this.incrementer)
    this.setState({ timerRunning: false, currentTodoId: null, runningTodoId: null });
  }

  render() {
  const { todo, completeTodo, deleteTodo} = this.props

  const element = this.state.todo ? (
      <TodoTextInput text={todo.text}
        onSave={(text) => this.handleSave(todo.id, text)} />
    ) : (
        <div className="view">
          <input className="toggle"
            type="checkbox"
            checked={todo.completed}
            onChange={() => completeTodo(todo.isRequired)} />
          <label>
            {todo.text}
          </label>
          <div className="buttons">
            <h6>{this.getHoures()}:{this.getMinutes()}:{this.getSeconds()}</h6>
            {(this.state.secondsStart === 0)
              ? <button className="timer-start" onClick={this.handleStartClick} disabled={this.state.timerRunning }>Start</button>
              : <button className="timer-stop" onClick={this.handleStopClick} disabled={!this.state.timerRunning && this.state.runningTodoId !== this.state.currentTodoId}>Stop</button>
            }
          </div>
          <button className="destroy"
            onClick={() => deleteTodo(todo.id)} />
        </div>
      )

    return (
      <li className={classnames({
        completed: todo.completed,
      })}>
        {element}
      </li>
    )
  }
}

TodoTextInput （以防万一）

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

export default class TodoTextInput extends Component {
  static propTypes = {
    onSave: PropTypes.func.isRequired,
    text: PropTypes.string,
    placeholder: PropTypes.string,
    newTodo: PropTypes.bool
  }

  state = {
    text: this.props.text || ''
  }

  handleSubmit = e => {
    const text = e.target.value.trim()
    if (e.which === 13) {
      this.props.onSave(text)
      if (this.props.newTodo) {
        this.setState({ text: '' })
      }
    }
  }

  handleChange = e => {
    this.setState({ text: e.target.value })
  }

  handleBlur = e => {
    if (!this.props.newTodo) {
      this.props.onSave(e.target.value)
    }
  }

  render() {
    return (
      <input className={
        classnames({
          'new-todo': this.props.newTodo
        })}
        type="text"
        placeholder={this.props.placeholder}
        autoFocus="true"
        value={this.state.text}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onKeyDown={this.handleSubmit} />
    )
  }
}

Answer 1

有很多方法可以做到这一点。您可以将当前正在运行的计时器的ID存储在MainSection 状态，并使用回调函数TodoItem从completeTodo更改它。然后，您可以将MainSection状态的此属性作为道具发送到每个TodoItem，并检查它是否正在运行：

    render() {
      const { todo, runningTodoId, startTodoTimer, completeTodo, deleteTodo} = this.props
      let disable = runningTodoId == todo.id;
    }

重点是，您需要与MainSection正在运行的TodoItem进行通信，或者至少在运行TodoItem时进行通信。据我所知，所有关于计时器状态的存储都是TodoItem状态的本地状态，因此另一个TodoItems无法知道它们是否应该能够启动

TODO列表为almost a classic example of the Redux usage。我不知道你是否可以将Redux引入你的应用程序，但它在存储全局状态时绝对是一个很好的工具。

一次性工作计时器

1 个答案: