Автор оригинала: Aakash Sangwan.

Как мы используем формы в HTML, мы можем использовать то же самое, чтобы реагировать. Он совсем отличается от других элементов DOM, но не слишком сложным. В отличие от HTML, в реакции вам придется использовать контролируемые компоненты. Это просто способ иметь функцию JavaScript после формы. Функция будет обрабатывать часть представления и будет также иметь доступ к форме.

В HTML форма обрабатываются с DOM, тогда как контролируемые компоненты будут обрабатывать данные при реагировании.

Например, все данные хранятся в «состоянии» (без кавычек). Далее, чтобы контролировать и изменять атрибуты, можно использовать атрибут «OnChange».

Пример кода для состояния будет следующим

this.state = { firstname: '' };

Вот как можно собрать данные от пользователя и получить его прямо в реакцию. Таким же образом, если кто-то хочет обновить состояние, можно использовать обработчик событий «OnChange».

myChangeHandler = (event) => {
    this.setState({firstname: event.target.value});
  }

Теперь, чтобы выполнить его, можно использовать следующий код.

Конечно, это не полный код, но просто объяснение того, как работает компонент работает в реакции.

Условный рендеринг

Одно из лучших вещей о реакции состоит в том, что можно также использовать условный рендеринг. Здесь мы можем создать пустой заголовок. Позже мы можем установить условие «если», независимо от того, был ли пользователь ввести любой ввод для данного поля или нет.

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

Пример кода для этого будет выглядеть что-то подобное. Вот как мы можем создать пустую переменную.

this.state = { firstname: '' };

Если человек вводит вход, мы можем использовать оператор IF для отображения вывода в заголовке или в любом месте.

if (this.state.username) {
      header = 
Hello {this.state.firstname}
;
    } else {
      header = '';
    }

Несомненно, используют разные виды условий в зависимости от ситуации.

Теги в реактивных формах

Не говоря уже о том, что есть некоторые из тегов, которые вы можете использовать, которые следуют следующим образом. Текстовая область:

this is where you can display the text

Выберите тег:

Ввод файла:

Несколько входов

Реагистрация также позволяет вам с легкостью обрабатывать несколько входов в форме. Вот как вы можете сделать это. Прежде всего, нам придется добавить атрибут «Имя» для всех элементов. После этого мы можем использовать «Event.target.name». Чтобы вызвать имена и пусть функция обрабатывает ее.

Окончательные слова

Вот как вы можете использовать формы для реагирования. Вы также можете использовать Formik для сборки форм. Он также рекомендуется в официальной документации. Для получения дополнительной информации о создании формы в реакции вы можете обратиться к DOCX. Тем не менее, вы можете узнать только, если вы тренируетесь больше вместо того, чтобы просто читать вещи. Итак, вы можете попробовать создать форму, чтобы отреагировать и посмотреть, как она идет для вас.