1

В приложении есть небольшой баг, хотелось бы его пофиксить. Это todo-list, когда я нажимаю на start и stop - всё работает, но когда я отмечаю задание выполненным (checked), таймер все равно можно активировать нажатием на кнопку start. Необходимо поставить такое условие, чтобы при состоянии Item - CompleteTodo - кнопку Start в таймере невозможно было нажать.

Код компонента ниже:

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



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


  handleStartClick = (checked) => {
    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);
  }

  handleCompleteClick = () => {
    this.props.completeTodo(this.props.todo.id);
    this.props.stopTimer(this.props.todo.id);
    clearInterval(interval);
  }

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

  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: '40%' }}>
            {todo.text}
          </label>
          <span style={{ display: 'block', fontSize: 16 }}>Total time is {this.formatSeconds(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>
    )
  }
}
5
  • Либо конец пятницы, либо условие для disabled кнопки Start/Stop вообще никогда не выполнится, т.к. при timerActive && timerTodo !== todo.id кнопка не рендерится
    – xEdelweiss
    24 фев 2017 в 15:56
  • все рендерится. условие в ТЗ, чтобы юзер мог делать только одну задачу одновременно. Пока таймер бежит, другие кнопки нажимать нельзя. Демо: overconfident-stocking.surge.sh 24 фев 2017 в 15:58
  • :) согласен, я имел ввиду, что в момент, когда кнопка может принять состояние disabled, эта самая кнопка не видна из-за условия !timerActive || timerTodo === todo.id
    – xEdelweiss
    24 фев 2017 в 16:01
  • а, это да. из-за этого условия я голову и ломала :/ 24 фев 2017 в 16:01
  • а disabled={(timerActive && timerTodo !== todo.id) || todo.completed} не даст желаемого результата?
    – xEdelweiss
    24 фев 2017 в 16:04

1 ответ 1

1

Было решено элементарным CSS

.my-todo-list li.completed button {
    display: none;
}
2
  • 1
    А еще можно добавлять атрибут disabled или цсс-свойство pointer-events: none, если захочется её оставить видимой. 24 фев 2017 в 14:48
  • а потом челоовек может ее с поомощью f12 сделать видимым 5 авг 2021 в 19:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.