Все, что вам нужно знать для создания форм в 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
.
Чтобы изменить значение name
, теперь нам нужно изменить нашу функцию changeValues
, например:
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
, как определено выше.
В конце концов, код, относящийся к раскрывающемуся меню, показан ниже:
Радио-кнопки
Это очень похоже на пример выпадающего меню. В этом разделе мы будем использовать ловушку 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
.
Теперь измените функцию changeValues
следующим образом:
Line 3
: еслиtype
триггерного элемента является флажком, тогда пустьvalue
будет логическим значением, которое определяет, отмечен ли элемент.Line 4
: передайте этотvalue
функцииsetFriendly
, чтобы обработчикisFriendly
был изменен соответствующим образом.
Последний код для флажка и связанного с ним крючка следующий:
Резюме
Если вы хотите, чтобы все примеры были в одном файле, вот вставка:
Дальнейшее чтение
Заключение
Эта концепция могла быть сложной. Мой вам совет - поиграйте с кодом, деструктурируйте программы и исследуйте, если вы запутались в какой-либо из строк или функций, для минимальной путаницы. Только не сдавайся!
Следующее сообщение: Как создать приложение погоды в React
Предыдущее сообщение: Компоненты на основе классов в React