#7 - Форма для добавления записей

Создание формы в React — это один из базовых, но при этом ключевых навыков при разработке клиентской части. Через формы пользователь взаимодействует с приложением: вводит данные, отправляет их на сервер и получает результат. В связке с API (например, Express) форма становится точкой создания новых записей в базе данных.

В React формы обычно реализуются как контролируемые компоненты. Это означает, что значения полей (input, textarea и т.д.) хранятся в состоянии (state), а изменения отслеживаются через обработчики событий, например onChange. Такой подход даёт полный контроль над данными формы и позволяет валидировать или изменять их прямо в процессе ввода.

Для отправки данных используется обработчик события onSubmit. Внутри него, как правило, предотвращается стандартное поведение формы (перезагрузка страницы) с помощью event.preventDefault(), после чего данные отправляются на сервер через fetch или axios. Например, можно отправить POST-запрос на `/api/messages`, передав текст сообщения и автора в формате JSON.

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

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