Работа с состоянием вместо массива
Для добавления новых пользователей и отображения изменений на веб-странице необходимо использовать состояние React, а не стандартный массив. Изменение состояния автоматически обновляет отображение данных на странице. Поэтому, вместо массива users, предлагается использовать конструктор, принимающий props, переданные из родительского компонента. Состояние users будет представлено массивом объектов. Обращения к this.users следует заменить на this.state.users. После сохранения изменений, обновление страницы не должно показать визуальных изменений, подтверждая правильность работы с состоянием.
Разбиение компонентов: создание компонента User
Для улучшения структуры приложения, разделим компонент Users на более мелкие компоненты. Вместо вывода всех пользователей в одном компоненте, создадим компонент User для вывода информации о каждом пользователе. Это улучшит читаемость и поддерживаемость кода.
Создадим файл User.js, скопировав содержимое, например, из файла Header.js, изменив названия на соответствующие. Импортируем компонент User в Users.js. В Users.js, заменим вывод HTML-кода для каждого пользователя на вызов компонента User, передавая ему в качестве свойства user объект текущего пользователя, а также ключ key для предотвращения ошибок React. В компоненте User получим доступ к переданным данным через props.user, и создадим переменную user для удобства обращения к этим данным.
Изменения не должны повлиять на визуальное отображение, но структура приложения станет более организованной.
Добавление кнопок редактирования и удаления с использованием React Icons
Для добавления кнопок редактирования и удаления, используем библиотеку react-icons. Установим её через npm: npm install react-icons. После установки, импортируем нужные иконки. Например, для иконок удаления и редактирования можно использовать MdCloseSharp и MdEditSharp. Добавим к иконкам классы для стилизации. Для удобства поиска иконок, можно использовать официальный сайт react-icons. Добавим стили для иконок (например, с помощью CSS, изменив цвет, прозрачность при наведении курсора и другие параметры). Функциональность кнопок будет реализована в последующих уроках.
Создание и стилизация компонента формы AddUser
Создадим компонент AddUser.js с формой для добавления новых пользователей (поля для имени, фамилии, биографии, возраста и чекбокса «счастлив?»). Для поля биографии используем <textarea>. Добавим атрибуты placeholder, type и id для каждого поля, а также htmlFor для связи лейблов с полями. Добавим кнопку «Добавить» с атрибутом type="button".
Добавим стили к форме с помощью CSS. Установим ширину, отступы, семейство шрифтов, жирность, отступы снизу, удалим обводку, укажем цвет фона и текста, размер шрифта. Стили для checkbox и кнопки обработаем отдельно. Добавим стили для наведения курсора на кнопку (например, плавное увеличение размера).
Обработка данных формы и добавление нового пользователя
Создадим состояния для каждого поля ввода. Используем обработчики событий onChange для каждого поля, чтобы обновлять соответствующее состояние при изменении значения. Для чекбокса, будем получать значение через event.target.checked.
Вынесем массив пользователей users в глобальный компонент, передавая его в качестве свойства users в компонент Users. В главном компоненте создадим метод addUser, который будет принимать данные нового пользователя и добавлять его в массив users с помощью setState. В компоненте AddUser, передадим метод addUser как свойство компонента. В обработчике клика кнопки «Добавить», вызовем метод addUser, передав ему объект с данными из состояний формы. Для генерации уникального id, будем использовать длину массива users + 1. В методе addUser, добавим новый пользовательский объект в массив users с помощью setState. Добавление новых пользователей будет происходить без перезагрузки страницы, и данные будут корректно отображаться.
В этом уроке мы научились работать с формами в React, создали компонент для добавления новых пользователей, организовали код в отдельные компоненты, использовали библиотеку react-icons и обработали данные формы для добавления новых пользователей в массив без перезагрузки страницы.