Введение

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

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

Чему стоит научиться

В этой статье я покажу вам, как я справляюсь со следующим:

  • Рендеринг динамических форм
  • Обработка изменений во всех формах
  • Использование кнопки для добавления дополнительных форм
  • Использование кнопки для удаления форм
  • Используйте стилизованные компоненты
  • Лучшие практики кода

Предпосылка

  • Знать Javascript
  • Знать ReactJs
  • Установить Npm/узел

Настройка среды

Чтобы создать новый проект реагирования, используйте следующую ссылку и назовите его dynamic-forms. В терминале перейдите в папку на рабочем столе и установите стилизованные компоненты, как показано ниже:

cd desktop
cd dynamic-forms
npm i styled-components ––save
Code .

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

Структура папок

Перейдем к терминалу и запустим следующий фрагмент кода:

cd src
mkdir View
cd View
mkdir Styles Util
cd Styles
touch ViewStyles.js
cd ..
cd Util
touch handlers.js
cd ..
touch Main.js
cd ..

Я перешел в папку src и создал папку с именем View, внутри папки View я создал две папки с именами Styles, Util и компонент с именем Main.js. Внутри папки Styles я создал файл с именем ViewStyle.js, а внутри утилиты — handlers.js.

Давайте зайдем в app.js и удалим возвращенный jsx, оставив только элементы div с классом App.

давайте зайдем в app.css и удалим все свойства стиля и добавим стиль по умолчанию, как показано ниже:

Отрисовка динамической формы

В компонент Main, который я создал выше, добавим следующий фрагмент кода:

В приведенном выше фрагменте я отрисовал заголовок и форму, содержащую поле ввода. formField — это состояние, которое обрабатывает все поля формы, в настоящее время отображается только одно поле.

Обратите внимание, что разметка была сгенерирована с использованием styled-components, как показано ниже:

Ранее я упоминал, что у меня будет кнопка, которая будет использоваться для добавления/удаления любой указанной формы. Давайте добавим кнопки, как показано ниже:

Поскольку React принимает только один дочерний элемент по возвращении, я создал обертку для поля и кнопок. Для каждого цикла он оборачивает элемент, содержащий поле и кнопки.

Интегрируйте иконки Fontawesome

Значки кнопок были добавлены с использованием шрифта awesome icon-v5.15.4, и я использовал CDN, который я связал внутри index.html, как показано ниже:

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

Добавить больше форм при нажатии кнопки

Давайте перейдем к файлу handlers.js, который я создал выше, и добавим в него следующий фрагмент кода:

Я объявил/экспортировал функцию handleAddForms, которая содержит два параметра, события и метод, устанавливающий состояние полей формы. Я использовал метод preventDefault события, чтобы форма не возвращала void, распространяла предыдущее состояние и добавляла в состояние пустую строку.

setFormField объявлен в основном компоненте, как показано ниже:

handleAddForms импортируется в компонент Main и передается в метод onClick элемента span и устанавливает аргументы, как показано ниже:

Удалить форму при нажатии кнопки

Давайте зайдем в файл handlers.js и добавим в него следующий фрагмент кода:

В приведенном выше фрагменте я объявил/экспортировал обработчик removeForm, я передал ему четыре (4) аргумента, инициированные события, индекс указанного поля, текущие поля и метод, который устанавливает состояние.

Я предотвратил возврат формы void, я установил критерии, чтобы следить за тем, когда поля остаются с одним полем, и прекращать выполнение остального кода после условия.

Я прошел через formField, чтобы получить тот, который был указан с помощью индекса, и вернул остальную часть поля, кроме указанного поля, и, наконец, установил состояние для доступных в настоящее время полей.

Метод removeForm также был импортирован в компонент Main и передан кнопке удаления onClick на кнопке, как показано ниже:

Обработка изменения формы

Давайте зайдем в файл handler.js и добавим в него следующий фрагмент кода:

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

Давайте перейдем в компонент Main и передаем функцию в методе onChange полей и устанавливаем значение для значения каждого поля, как показано ниже:

Демо

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

Заключение

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

Если эта статья была вам полезна, ставьте лайки, комментируйте и подписывайтесь на меня в Linkedin и Medium, чтобы увидеть больше моих статей. Нажмите на следующую ссылку, чтобы получить доступ к исходному коду code.