Все, что вам нужно знать для создания форм в 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