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 that you have read and understand our privacy policy and code of conduct.

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