Введение
Интерес к цифровому сознанию резко возрос, и веб-приложение является одним из отличных способов создания и разработки программного приложения для решения той или иной человеческой проблемы. Сбор данных пользователей — это одна из областей развития, которую нельзя упускать из виду.
Вы младший/старший инженер-программист, который хочет собирать данные порциями, используя поля формы, и следить за отдельными изменениями, используя реагирующие хуки? Тогда эта статья для вас.
Чему стоит научиться
В этой статье я покажу вам, как я справляюсь со следующим:
- Рендеринг динамических форм
- Обработка изменений во всех формах
- Использование кнопки для добавления дополнительных форм
- Использование кнопки для удаления форм
- Используйте стилизованные компоненты
- Лучшие практики кода
Предпосылка
- Знать 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.