Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.11.2018, 12:07
Интересующийся
Отправить личное сообщение для dmitry.suhotsky Посмотреть профиль Найти все сообщения от dmitry.suhotsky
 
Регистрация: 16.11.2018
Сообщений: 10

Не изменяется 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>
        );
    }
}
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2018, 12:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,708

Не уверен, но по-моему у вас в коде несколько ошибок:
21,33,38 строки: пытаетесь заменить свойство tasks в state класса, однако в итоге записываете в state массив task'ов.
37 строка: state.tasks - массив задач, у массива нет свойства isDone, тут нужно обратиться к изменяемому элементу, а не к массиву.
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2018, 12:30
Интересующийся
Отправить личное сообщение для dmitry.suhotsky Посмотреть профиль Найти все сообщения от dmitry.suhotsky
 
Регистрация: 16.11.2018
Сообщений: 10

tasks[index].inDone = !this.state.tasks[index].inDone;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
После цикла не изменяется CSS свойства элемента массива classic Общие вопросы Javascript 3 28.11.2017 13:42
Почему не изменяется "P"? Bruha1991 Общие вопросы Javascript 2 23.01.2016 09:03
Изменяется родительский массив voodoo_dn Общие вопросы Javascript 18 22.12.2014 21:25
Присвоить значение hidden и -200% когда div закрыт xrror Элементы интерфейса 0 20.09.2013 16:47
Не изменяется DOM после назначения класса css в Chrome khusamov Общие вопросы Javascript 5 22.03.2010 20:45