Все, что вам нужно знать для создания форм в React

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

• Состояния или крючки. Поскольку React движется в сторону функциональных компонентов, в этом посте мы будем использовать хуки.
• Обработка событий.

Как вы можете заметить, значения текстов динамически меняются в зависимости от ввода пользователя. Это позволяет улучшить визуальное отображение результатов.

Начиная

Объявление хуков

Мы будем использовать хуки для изменения наших значений в соответствии с вводом пользователя.
Здесь мы создадим несколько таких хуков:

Как следует из названий переменных, nameперехватчик изменяет nameтекстовое поле, fruitизменяет fruitзначение раскрывающегося меню и так далее, и тому подобное.

Функция изменения хуков

Теперь давайте создадим функцию для изменения соответствующих хуков. Эта функция будет вызываться всякий раз, когда значение элемента изменяется в форме.
Обратите внимание , что эта функция неполная, на данный момент мы просто получаем информацию о сработавшем HTML-элементе.

Напишите код функции changeValues().

• Line 1: всякий раз, когда элемент срабатывает, eventпараметр содержит информацию об элементе, например, является ли это typeфлажком, текстовым полем и т. д.
• Line 2: Получите nameи typeинициируемого HTML-элемента, а затем присвойте их именованным переменным соответственно.
• line 3: Если typeэлемент является флажком, то valueдолжно быть booleanуказано, установлен ли флажок. Если это не флажок, то valueэто значение элемента HTML.

Текстовое поле

В этом примере мы будем менять nameкрючок.

Чтобы использовать текстовое поле в формах, напишите следующий код:

• line 3 : Отображение значения nameхука
• line 5: Создайте текстовое поле с соответствующим именем. Если в любой момент значение поля изменится ( onChangeсобытие), вызовите changeValuesфункцию, которую мы определили ранее, изменив таким образом значение перехватчика name.

• Line 4: Если имя( event.target.name) сработавшего HTML-элемента равно name, то мы изменим значение перехватчика name.
  В свою очередь, это приведет к повторной визуализации компонента для отображения значения, nameопределенного выше.

Выпадающие меню

Сначала создайте раскрывающееся меню внутри formродительского элемента, а затем используйте pтег для отображения значения перехватчика, связанного с этим раскрывающимся меню. В моем примере это будет fruitкрючок.

Этот код говорит, что всякий раз, когда входные данные метода раскрывающегося списка изменяются ( onChangeсобытие), вызывают нашу changeValuesфункцию. Это, в свою очередь, меняет значение крючка fruit.

Теперь нам нужно установить условие в нашей changeValuesфункции. Сначала он проверит, nameявляется ли элемент fruit. Если да, то мы вызовем функцию setFruit.

• Line 4: Если имя ( event.target.name) сработавшего HTML-элемента — Fruit, мы изменим значение перехватчика fruit.
  В свою очередь, это приведет к повторной визуализации компонента для отображения значения, fruitопределенного выше.

Радио-кнопки

Это очень похоже на пример с раскрывающимся меню. В этом разделе мы будем использовать genderхук.

Как вы можете заметить, в соответствии с line 7и line 11при каждом изменении входных данных changeValuesвызывается функция.
Если значение перехватчика совпадает со значениями любого из этих переключателей, то соответствующий переключатель проверяется.

Теперь давайте изменим changeValueфункцию, чтобы изменить genderхук на соответствующее значение.

Код, связанный с этим элементом HTML, находится в этой вставке:

Флажок

Этот метод ввода требует некоторого обучения. Он не имеет значения, но имеет единственное логическое свойство, независимо от того, было оно checked или нет.

В этом примере мы будем отображать и изменять isFriendlyхук с помощью флажка.

Сначала создайте флажок в своем formsэлементе и pэлемент для отображения isFriendlyкрючка.

Вот по этому коду:

• Line 2: Выполните проверку, если isFriendlyкрючок равен true, затем отобразите yes, в противном случае код отобразит no.
• Line 5: Показать флажок. Всякий раз, когда пользовательский ввод изменяется ( onChangeсрабатывает событие), вызывайте changeValuesфункцию. Это, в свою очередь, поможет нам сменить isFriendlyкрючок.

• Line 3: Если элемент type сработавшего элемента является флажком, то пусть это valueбудет логическое значение, которое определяет, проверен ли элемент.
• Line 4: передать это valueв setFriendlyфункцию, чтобы isFriendlyхук был изменен соответствующим образом.

Резюме

Если вы хотите, чтобы все примеры были в одном файле, вот вставка:

Дальнейшее чтение

• Представляем React Hooks
• Реагировать на обработку
• Формы — Реагировать

Эта концепция могла быть сложной. Мой вам совет — поиграйте с кодом, деструктурируйте программы и исследуйте, если вы запутались в какой-либо строке или функции, чтобы свести путаницу к минимуму. Просто не сдавайтесь!

Следующая запись: Как создать приложение погоды в React
Предыдущая запись: Компоненты на основе классов в React