Javascript 一次性工作计时器

我觉得自己完全糊涂了，因为我从昨天开始就一直在处理这个问题，没有任何帮助。 所以，问题是：我要做的事情清单。每个任务都有计时器。只有一个计时器可以同时工作，所以用户只能在同一时间完成一项任务。 我以为当一个计时器运行时，我可以在另一个任务禁用时执行“启动”按钮，但我认为我在设置状态中犯了错误，因为所有计时器仍在一起运行=( 我阅读了文档，但它对我没有帮助。 另外，我有文件TodoTextInput，这是生成这些任务，我想也许我应该在这里粘贴我的计时器，但这很奇怪

关于完整信息，我在这里留下两个文件。 谢谢你的帮助

TodoItem（此处发布）

import React，{Component，PropTypes}来自“React”
从“classnames”导入类名
从“./TodoTextInput”导入TodoTextInput
将默认类导出到DoItem扩展组件{
建造师（道具）{
超级（道具）；
this.state={secondssstart:this.props.minSeconds，timerRunning:false}
}
静态类型={
todo:PropTypes.object.isRequired，
deleteTodo:PropTypes.func.isRequired，
completeTodo:PropTypes.func.isRequired，
}
静态defaultProps={
分秒：0
}
handleSave=（id，文本）=>{
如果（text.length==0）{
this.props.deleteTodo（id）
}
}
handleStartClick=（）=>{
如果（！this.state.timerRunning）{
this.incrementer=setInterval（（）=>{
这是我的国家({
secondsStart:（this.state.secondsStart+1）
});
}, 1000)
这是我的国家({
时光流逝：没错，
currentTodoId:this.props.todo.id，
runningTodoId:this.props.todo.id
});
}
}
getSeconds=（）=>{
返回（'0'+this.state.secondsStart%60）。切片（-2）
}
getMinutes=（）=>{
返回数学地板（（this.state.secondssstart/60）%60）
}
getHoures=（）=>{
返回数学地板（（this.state.secondssstart/3600）%24）
}
handleStopClick=（）=>{
clearInterval（this.incrementer）
this.setState（{timerRunning:false，currentTodoId:null，runningTodoId:null}）；
}
render（）{
const{todo，completeTodo，deleteTodo}=this.props
常量元素=this.state.todo(
this.handleSave（todo.id，text）}/>
) : (
completeTodo（todo.isRequired）}/>
{todo.text}
{this.getHoures（）}:{this.getMinutes（）}:{this.getSeconds（）}
{（this.state.secondssstart==0）
开始
：停止
}
deleteTodo（todo.id）}/>
)
返回(

{element}

)
}
}

TodoTextInput（以防万一）

import React，{Component，PropTypes}来自“React”
从“classnames”导入类名
将默认类导出到NotextInput扩展组件{
静态类型={
onSave:PropTypes.func.isRequired，
text:PropTypes.string，
占位符：PropTypes.string，
newTodo:PropTypes.bool
}
状态={
文本：this.props.text | |”
}
handleSubmit=e=>{
const text=e.target.value.trim（）
如果（e.which==13）{
this.props.onSave（文本）
如果（本道具新规）{
this.setState（{text:'}）
}
}
}
handleChange=e=>{
this.setState（{text:e.target.value}）
}
车把LUR=e=>{
如果（！this.props.newTodo）{
this.props.onSave（例如target.value）
}
}
render（）{
返回(
)
}
}

有很多方法可以做到这一点。您可以将当前运行的计时器的id存储在

main节

状态，并使用类似

completeTodo

的回调函数将其从

更改为doItem

。然后，您可以将

main节

状态的此属性发送到每个

TodoItem作为道具，并检查它是否是正在运行的道具：

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

关键是您需要与正在运行的
TodoItem
的
main部分进行通信，或者至少与正在运行的
TodoItem
进行通信。据我所知，您存储的所有关于计时器状态的信息都是
TodoItem
状态的本地信息，因此其他
TodoItem
无法知道是什么乙醚，他们应该能够启动或不启动

TODO列表是。我不知道你是否可以在你的应用程序中引入Redux，但在存储全局状态时，它绝对是一个很好的工具。
所以我知道问题是，你希望在启动时禁用所有计时器，对吗？你在哪里使用TodoItem组件？是的，当我在一个任务中单击“启动”时-我知道uld没有机会在其他任务中单击“开始”。只有在此任务中单击“停止”时，我才能运行其他任务和计时器。TodoItem组件我在组件Main部分导入-它是应用程序的最大部分。是的，我在应用程序中使用Redux，我只是重写了“经典示例”使用我的功能。因此，无论如何，我需要与MainSection通信，我是对的？要么与MainSection通信，要么使用Redux的存储。例如，如果使用Redux存储当前运行项目的id，则不必将其存储在MainSection中。
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} />
    )
  }
}

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