Не изменяется state
![]() Реализую 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> ); } } |
Не уверен, но по-моему у вас в коде несколько ошибок:
21,33,38 строки: пытаетесь заменить свойство tasks в state класса, однако в итоге записываете в state массив task'ов. 37 строка: state.tasks - массив задач, у массива нет свойства isDone, тут нужно обратиться к изменяемому элементу, а не к массиву. |
tasks[index].inDone = !this.state.tasks[index].inDone;
|
Часовой пояс GMT +3, время: 03:24. |