Давайте начнем!

Во-первых, давайте создадим наше приложение React. После того, как вы установили React, вы можете запустить команду «create-response-app» в своем терминале, за которой следует имя приложения, которое вы хотите создать. Это создаст ваше приложение React и будет включать в себя все необходимые функции, которые помогут вам начать работу. В терминале введите команду «cd» в свое приложение и запустите его с помощью команды «npm start».

  • создать-реагировать-приложение react_forms
  • cd react_forms
  • npm start

Затем давайте создадим наш новый компонент.

Мы создадим новый файл ClassComponentForm.js, тогда нам всегда нужно импортировать React.

Теперь давайте создадим наш компонент класса.

Наша форма будет простой. У нас будет имя, адрес электронной почты, почтовый индекс и дата.

Сначала я собираюсь создать пустую форму с именем emptyForm и установить для наших атрибутов формы значение, равное пустой строке.

Затем я создам функцию componentDidMount, которая установит состояние моего компонента в пустую форму, которую я только что создал.

Теперь приступим к созданию формы.

Вот наш первый ввод.

  • htmlFor = в метке, которая обычно в JS используется только для =, это ищет соответствующий идентификатор на входе, вот как они связаны.
  • Идентификатор - это то, как наша метка связана с нашим вводом.
  • Атрибут имени должен совпадать с ключом в вашей форме. Если вы хотите изменить состояние {name: ‘‘}, вам необходимо убедиться, что ваше имя ввода соответствует вашему состоянию (которое в данном случае также является именем).
  • Атрибут type указывает тип отображаемого элемента ‹input›.
  • Заполнитель - это текст, который появляется во вводе перед вводом пользователем.
  • Значение должно быть установлено в качестве нашего состояния по имени. Следовательно, «this.state .___» должно быть таким же, как значение атрибута name.
  • onChange примет функцию, которая вызывается, когда пользователь вводит что-либо во входные данные.

Теперь нам нужно создать функцию onChange, которая обновит состояние нашей формы, чтобы отразить ввод пользователя.

И обновите onChange в нашем input.

Теперь наш ввод имени отражает ввод пользователя, мы можем продолжить и сделать остальную часть нашей формы.

Наша форма немного тусклая, поэтому давайте добавим ей CSS.

Мы сделаем файл ClassComponentForm.css. Вот наш файл css.

А вот как выглядит наша новая форма.

Сейчас наша форма постоянно отображается на экране, мы этого не хотим, поэтому давайте сделаем кнопку, которую мы будем нажимать, и она покажет нашу форму. Для этого мы перейдем к нашему файлу App.js и внесем некоторые изменения.

Мы собираемся пропустить несколько вещей, которые должны иметь смысл, когда мы перейдем к форме функционального компонента.

Как и раньше, мы импортируем response, а затем создадим наш компонент следующим образом:

Выглядит довольно похоже на наш компонент класса, но мы теряем рендеринг и просто получаем возврат. Также больше никаких «this.state, this.props». Вместо этого вы передадите props в качестве аргумента и вызовете props .___

Кроме того, теперь у нас есть доступ к хукам. Хуки - это функции, которые позволяют нам «подключаться» к состоянию React и функциям жизненного цикла из функциональных компонентов. Мы импортируем useState, который позволяет нам использовать встроенный обработчик состояния из response. useState по сути то же самое, что установка нашего состояния в компоненте класса. Мы создадим функцию, которая может обращаться к этому состоянию и обновлять его, когда мы хотим, как и setState. Вот наш пример.

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

Наша форма останется почти такой же, нам просто нужно внести два небольших изменения.

Мы изменим наши входные значения с value = {this.state.name} на value = {form.name}, а наш onChange с onChange = {(e) = ›this.handleChange (e)} на onChange = { (e) = ›handleChange (e)}

Мы собираемся стилизовать этот компонент по-другому. Мы сохраним наш стиль в этом файле. Наш css меняется с,

to:

А затем вместо использования идентификатора, как раньше, мы добавляем тег стиля в наш div и помещаем имя стиля.

Если вы хотите добавить встроенный стиль, мы можем сделать это следующим образом.

Вот наша готовая форма функционального компонента

Давайте закончим и добавим кнопку для нашей новой формы в компонент "Приложение".

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