Как создавать формы в React

Точно так же, как мы используем формы в HTML, мы можем использовать то же самое в React. Он сильно отличается от других элементов DOM, но не слишком сложен.

В отличие от HTML, в React вам придется использовать контролируемые компоненты. Это просто способ добавить функцию javascript после формы. Функция будет обрабатывать часть отправки, а также будет иметь доступ к форме. Обработка форм

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

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

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

this.state = { firstname: '' };

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

Точно так же, если кто-то хочет обновить состояние, можно использовать обработчик события «onChange».

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

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

<input
        type='text'
        onChange={this.myChangeHandler}
      />

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

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

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

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

Пример кода для этого будет выглядеть примерно так.

Вот как мы можем создать пустую переменную.

this.state = { firstname: '' };

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

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

Конечно, можно использовать различные типы условий в зависимости от ситуации.

Теги в React Forms

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

Текстовая область:

<textarea>

здесь вы можете отобразить текст

</textarea>

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

<select> <option……/option> </select>

Ввод файла:

<input type=”file”/>

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

React также позволяет легко обрабатывать несколько входных данных в форме. Вот как вы можете это сделать.

Прежде всего, нам нужно будет добавить атрибут «имя» ко всем элементам. После этого мы можем использовать «event.target.name». чтобы вызвать имена и позволить функции обработать это.

Заключительные слова

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