У меня есть очень запутанная задача для меня, и мне нужна ваша помощь. Мне нужно создать todos с таймерами для каждой задачи. Таким образом, пользователь может создать свою собственную задачу -> запустить таймер -> остановить таймер -> закрыть задачу. У каждой задачи есть кнопки запуска и остановки.Отключена кнопка в ответе
Проблема в том, что ТОЛЬКО ОДИН таймер может работать одновременно. Поэтому еще одна кнопка «Пуск» должна быть отключена, когда работает один таймер. Я полагаю, что это решение рядом с 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>
)
}
К сожалению, может быть, это слишком большой, но я действительно не знаю, что я могу скрыть, возможно, что-то будет полезно. Буду очень признателен вам за помощь.
Как я понял право, эти состояния можно контролировать следующим образом: handleStartClick =() => { this.incrementer = setInterval (() => { this.setState ({secondsStart: (this.state. secondsStart + 1) }); }, 1000) this.setState ({ timerRunning: true }); } –
Да. Проверьте действительный метод setState для получения точных данных. –
Спасибо, это было действительно полезно для меня. –