Реализую todolist, при нажатии на кнопку вызывается функция _done, которая помечает задачу выполненной, зачеркивает и присваивает inDone = !inDone, но срабатывает только один раз, toggle не отрабатывает
import React, { Component } from 'react';
import './TodoList.css'
export default class TodoList extends Component {
constructor(props) {
super();
this.state = {
tasks: [
{title: "learn JS", inDone: true},
{title:'Learn ReactJS',inDone: false}
]
}
}
_handlewrite(event) {
if (event.key === 'Enter') {
var message = event.target.value;
var tasks = this.state.tasks
tasks.push({title: message, inDone: false});
this.setState({tasks})
event.target.value = "";
}
}
_geleteTask(index) {
var tasks = this.state.tasks.filter(function (elem, i) {
if (i !== index) {
return true;
} else {
return false;
}
});
this.setState({tasks})
}
_done(index) {
var tasks = this.state.tasks;
tasks[index].inDone = !this.state.tasks.inDone;
this.setState({tasks})
}
render() {
return (
<div className="TodoList">
<input onKeyPress={this._handlewrite.bind(this)} />
{
this.state.tasks.map((task, index) => {
return <div className={task.inDone == true ? 'TodoList__task TodoList__inDone__true': 'TodoList__task'} key={index}>
<span onClick={this._done.bind(this,index)} className="TodoList__inDone">V</span>
{task.title}
<span className="TodoList__delete" onClick={this._geleteTask.bind(this, index)}>X</span>
</div>
})
}
</div>
);
}
}