Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Понимание форм и событий в React

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Если вы новичок в React, я бы порекомендовал прочитать вводный учебник по React для начала.

Начинаем

Начнем с создания нашего веб-приложения React. Создайте папку проекта под названием ReactFormApp. Внутри ReactFormApp создайте файл index.html и добавьте следующий код HTML:

Инициализируйте проект с помощью Node Package Manager (npm).

Заполните необходимые данные, и вы должны получить файл package.json внутри папки ReactFormApp.

Установите зависимости react и react-dom с помощью npm.

Установите необходимый пакет babel с помощью npm и сохраните его в файле package.json.

Пакеты babel необходимы для преобразования JSX-кода в JavaScript.

Создайте конфигурационный файл webpack для обработки конфигураций webpack. Создайте файл с именем webpack.config.js и добавьте следующие конфигурации:

app.js - это файл, в котором будет находиться наш код React. Создайте файл под названием app.js внутри папки ReactFormApp. Импортируйте необходимые библиотеки react в app.js. Создайте компонент под названием App, имеющий div с некоторым текстом. Выделите компонент с помощью метода рендеринга. Вот как выглядит основной файл app.js:

Сохраните изменения и попробуйте перезагрузить сервер разработки webpack.

После перезапуска сервера вы сможете просмотреть приложение React, запущенное на http://localhost:8080/.

React Form App Display Screen

Создание формы отзыва

У нас есть базовое приложение React. Перейдем к следующему шагу и попытаемся создать компонент формы с использованием кода JSX в app.js.

Создайте компонент под названием FormComp внутри app.js.

Внутри функции рендеринга для FormComp мы определим HTML-код для создания формы. Мы поместим пару лейблов, полей ввода и кнопку для клика. Вот как это выглядит:

Выделите компонент формы FormComp, чтобы отобразить форму внутри index.html.

Сохраните изменения и перезапустите сервер webpack, и вы сможете просмотреть форму.

React App Form Tutorial

Добавление событий в форму

Наша React форма хорошо выглядит Чтобы заставить ее взаимодействовать, нам нужно добавить события в форму.

Мы начнем с добавления переменных состояния в каждое из полей ввода, чтобы мы могли считывать значения этих полей. Зададим переменные состояния для имени и последних текстовых полей ввода.

Обязательно установите начальное состояние для указанных выше переменных. Определите функцию getInitialState внутри компонента FormComp и инициализируйте обе переменные.

Нам нужно обработать событие on-change полей ввода и назначить переменные состояния, когда значение в текстовых полях изменится. Поэтому определите событие onChange в полях ввода.

Определите функции onChange внутри FormComp и установите переменные состояния.

Попробуем преобразовать переменные состояния, используя их. Внутри FormComp HTML добавьте следующий элемент, отображающий переменные состояния.

Сохраните изменения и перезапустите сервер webpack. Попытайтесь ввести текст внутри текстового поля с именем и фамилией, и вы сможете просматривать результаты сразу же после ввода.

React Form App Form Fill

Затем добавим событие on-click в кнопку отправки, которую мы имеем на нашей форме.

Определите функцию handleClick внутри компонента FormComp. При нажатии кнопки «Отправить» мы свяжем имя и фамилию и отображаем полное имя внутри формы. Вот функция handleClick:

Также инициализируйте переменную Name в функции getInitialState.

Отобразите конкатенированное полное имя в форме HTML.

Вот как выглядит финальная версия компонента FormComp:

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

Подведем итоги

В этом руководстве React вы узнали, как начать работу с приложениями React, и рассмотрели основные понятия о том, как обращаться с формами и событиями в веб-приложении на основе React. Надеюсь, этот учебник будет полезен для вас при создании приложений на основе React.

Исходный код этого учебника доступен в GitHub.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.