Question

我的任务很混乱，我需要你的帮助。我需要为每个任务创建带有计时器的待机。因此用户可以创建自己的任务 - ＆gt;启动计时器 - ＆gt;停止计时器 - ＆gt;关闭任务。每个任务都有按钮开始和停止。

问题是只有一个计时器可以同时工作。因此，即使一个计时器工作，也应该禁用另一个按钮“开始”。我想在handleStartClick附近做出决定（更改值按钮？）。

这是代码的主要部分：

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

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

  static defaultProps = {
      minSeconds: 0
  }

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

   getMinutes = () => {
    return Math.floor('0' + this.state.secondsStart / 60)
  }
    getHoures = () => {
    return Math.floor(this.state.secondsStart / 60)
  }

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

  handleStartClick = () => {
    this.incrementer = setInterval(() => {
      this.setState({secondsStart:(this.state.secondsStart + 1)
      });
    }, 1000)
  }

  handleStopClick = () => {
    clearInterval(this.incrementer)
  }

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

    let element
    if (this.state.todo) {
      element = (
        <TodoTextInput text={todo.text}
                       onSave={(text) => this.handleSave(todo.id, text)} />
      )
    } else {
      element = (
        <div className="view">
          <input className="toggle"
                 type="checkbox"
                 checked={todo.completed}
                 onChange={() => completeTodo(todo.id)} />
          <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}>Start</button>
                : <button className="timer-stop" onClick={this.handleStopClick}>Stop</button> 
                }
          </div>
          <button className="destroy"
                  onClick={() => deleteTodo(todo.id)} />
        </div>
      )
    }

抱歉，也许它太大了，但我真的不知道我能隐藏什么，也许有些东西会有用。我将非常感谢您的帮助。

Answer 1

对于timer-stop按钮，您可以添加disabled={ ! this.state.timerRunning && this.state.runningTaskId !== currentTaskId }。对于timer-start按钮，添加disabled={ this.state.timerRunning }这将禁用，这将在计时器运行时禁用所有启动按钮。

您可以使用handleStartClick() / handleStopClick()方法控制上述状态。

在React禁用按钮

1 个答案: