React JS: Кнопка ‘Добавить задание’ — урок 13

Создание кнопки «Добавить новое задание»

Создадим кнопку для добавления новых элементов. Скопируем существующую кнопку «Редактировать» и вставим её перед рендерингом блоков. Изменим текст кнопки на «Добавить новое задание» и применим соответствующие стили (описаны в основном файле стилей).

Добавление функции Add

Создадим функцию Add, которая будет добавлять новые объекты. Для начала удалим все элементы из массива tasks. Функция Add принимает один параметр — text (текст нового задания). Внутри функции:

  1. Получаем текущее состояние массива tasks с помощью this.state.
  2. Добавляем новый элемент в массив с помощью метода push: this.state.tasks.push({text}).
  3. Обновляем состояние с помощью this.setState({tasks}).

Вызов функции Add и обработка события onClick

Вызовем функцию Add при клике на кнопку, используя обработчик события onClick:

onClick={this.Add.bind(null, ‘Простое задание’)}

Здесь:

  • this.Add — вызов функции.
  • .bind(null, ‘Простое задание’) — привязка контекста this и передача аргумента ‘Простое задание’ (текст по умолчанию). null указывает на отсутствие контекста объекта.

Тестирование и результат

После перезагрузки страницы кнопка «Добавить новое задание» будет функциональна. При нажатии добавляется новое задание с текстом «Простое задание». Задания можно редактировать и удалять.

Мы создали функциональное приложение для управления задачами, используя React JS. Разработка оказалась простой и быстрой. В отличие от JavaScript или jQuery, React JS позволяет создавать сложные приложения с минимальным количеством кода, что объясняет его популярность среди крупных компаний. В следующем уроке подведём итоги и обсудим дальнейшие шаги.

Что будем искать? Например,программа