В этой статье показано, как создавать и обрабатывать базовую форму в React. Форма позволяет пользователю каким-то образом взаимодействовать с приложением. Формы позволяют пользователям просто вводить или выбирать параметры на странице, но их также можно использовать для отправки этого пользовательского ввода в другое место в приложении или, в некоторых случаях, на сервер. Ввод формы можно использовать для самых разных вещей. Ниже приведена очень простая форма, которая возвращает пустое поле ввода, которое принимает ввод текста от пользователя:
На данный момент пользователь может ввести любой текст в форму, и он будет виден в поле ввода, но на данный момент ничего нельзя сделать с этим вводом. Чтобы использовать этот пользовательский ввод текста для каких-либо действий, форма должна быть обработана!
Обработка форм
Обработка формы означает: как будут обрабатываться данные при изменении или отправке формы. Например, если пользователь хотел опубликовать комментарий в социальном приложении, все, что ему нужно сделать, это ввести комментарий, нажать «Отправить», и комментарий волшебным образом появится под публикацией. На самом деле это просто обработка формы! Когда пользователь нажимает эту кнопку «Отправить», данные (или в данном случае «комментарий») будут отправлены куда-то внутри приложения, и с ними что-то будет сделано, или, другими словами, данные будут обработаны(в этом случае комментарий будет размещен под постом)! На скриншотах ниже показан процесс обработки формы:
Как и сейчас, когда пользователь нажимает кнопку «Отправить!» после ввода текста, страница перезагружается, и ввод исчезает. Чтобы эта форма что-то делала с входными данными при отправке, мы должны добавить в нашу форму некоторый код, который будет «обрабатывать» наши данные формы. Для этого мы используем обработчики событий! Обработчики событий сообщают приложению, что делать, когда запускается определенное событие. В этом случае мы хотим, чтобы прослушиватель обрабатывал всю форму при ее отправке (он будет сообщать нашей форме, что делать, когда нажимается «Отправить!»), поэтому мы присоединяем прослушиватель событий ко всему нашему всему форма:
Теперь, когда пользователь нажимает кнопку «Отправить!», вся форма будет обрабатываться нашим прослушивателем событий «onSubmit». На этот раз, когда форма отправляется, действие события по умолчанию (перезагрузка страницы) предотвращается, и пользовательский ввод остается на странице!
Теперь, когда у нас есть прослушиватель событий, который поможет пользователю обработать данные формы при запуске события, пользователь теперь может решить, что именно делать с этими данными формы. Отсюда есть несколько маршрутов, по которым пользователь может манипулировать данными формы. На предыдущем снимке экрана мы делаем то, что хотим, прямо внутри функции обратного вызова слушателя. Хотя в некоторых случаях это позволит достичь желаемого, это не всегда лучшая практика. Лучше, если у нас есть функция-обработчик, которая может обрабатывать наше событие.
В этом случае форма просто уведомит пользователя о том, что форма отправлена. Пользователь выполняет это действие, создавая функцию-обработчик. Эта функция-обработчик — просто функция, которая будет обрабатывать наше событие (e). Ниже приведен скриншот той же формы, но с функцией-обработчиком, которая обрабатывает наше событие и что-то делает при срабатывании события:
На этот раз, когда мы нажимаем «Отправить!», прослушиватель событий «onSubmit» прослушивает событие (e) и передает его нашей функции-обработчику, где мы будем обрабатывать событие. Внутри функции обработчика мы предотвращаем действие по умолчанию (перезагрузка страницы) события отправки, а затем отправляем пользователю предупреждение о том, что форма отправлена!
Теперь мы, наконец, создали форму, которая будет обработана, если она будет отправлена. Очевидно, что пользователи могут делать гораздо больше с данными формы после их получения из формы, но для простоты функция обработчика только предупреждает пользователя об отправке формы. Возвращаясь к приведенному ранее примеру комментария в социальных сетях, когда пользователь получает данные формы (или «комментарий»), возможно, у них есть функция в приложении, которая будет принимать эти данные формы и форматировать их в комментарий под сообщением. . Или, может быть, они отформатируют его прямо там, в функции-обработчике. Это полностью зависит от программиста, который работает над приложением.
Формы — отличный способ сделать приложения более динамичными и добавить гораздо больше возможностей, когда речь идет о приеме данных от пользователя и использовании или сохранении этих данных в другом месте приложения!
