Создание кнопки «Добавить новое задание»
Создадим кнопку для добавления новых элементов. Скопируем существующую кнопку «Редактировать» и вставим её перед рендерингом блоков. Изменим текст кнопки на «Добавить новое задание» и применим соответствующие стили (описаны в основном файле стилей).
Добавление функции Add
Создадим функцию Add, которая будет добавлять новые объекты. Для начала удалим все элементы из массива tasks. Функция Add принимает один параметр — text (текст нового задания). Внутри функции:
- Получаем текущее состояние массива tasks с помощью this.state.
- Добавляем новый элемент в массив с помощью метода push: this.state.tasks.push({text}).
- Обновляем состояние с помощью this.setState({tasks}).
Вызов функции Add и обработка события onClick
Вызовем функцию Add при клике на кнопку, используя обработчик события onClick:
onClick={this.Add.bind(null, ‘Простое задание’)}
Здесь:
- this.Add — вызов функции.
- .bind(null, ‘Простое задание’) — привязка контекста this и передача аргумента ‘Простое задание’ (текст по умолчанию). null указывает на отсутствие контекста объекта.
Тестирование и результат
После перезагрузки страницы кнопка «Добавить новое задание» будет функциональна. При нажатии добавляется новое задание с текстом «Простое задание». Задания можно редактировать и удалять.
Мы создали функциональное приложение для управления задачами, используя React JS. Разработка оказалась простой и быстрой. В отличие от JavaScript или jQuery, React JS позволяет создавать сложные приложения с минимальным количеством кода, что объясняет его популярность среди крупных компаний. В следующем уроке подведём итоги и обсудим дальнейшие шаги.