Уроки React JS

Урок #11 - Удаление компонентов и обновление состояний

Урок #11 - Удаление компонентов и обновление состояний

В этом уроке мы научимся удалять, а также обновлять значения состояний нашей программы. Все это мы сделаем благодаря нескольким новым функциям, которые мы как раз и пропишем в этом уроке.

Видеоурок

Ниже приведен класс Field в новой ES6 разметке:
class Field extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [
        'Необходимо купить молоко!',
        'Надо почистить зубы',
        'Просто отдохнуть'
      ]
    };
  };
  deleteBlock = (i) => {
    var arr = this.state.tasks;
    arr.splice (i, 1);
    this.setState ({tasks: arr});
  };
  updateText = (text, i) => {
    var arr = this.state.tasks;
    arr[i] = text;
    this.setState ({tasks: arr});
  };
  eachTask = (item, i) => {
    return (
      <Task key={i} index={i}>
        {item}
      </Task>
    );
  };
  render() {
    return (
      <div className="field">
        {this.state.tasks.map (this.eachTask)}
      </div>
    );
  }
}

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Уроки Angular для начинающих
7 уроков
Уроки Vue.js для начинающих
10 уроков
Изучение React JS / Redux библиотеки
9 уроков
Создание приложения на React JS / Использование API
7 уроков
Уроки Node JS и Express для начинающих
17 уроков
Изучение библиотек jQuery
24 урока
Комментарии для сайта Cackle