Создавайте динамические формы с помощью библиотеки форм React Hook

Учебник React Hook Form: как использовать библиотеку react-hook-form для создания динамических форм.

В этом уроке мы узнаем, как создать форму с динамическими входами или, как некоторые называют ее, расширяющейся / расширяющейся формой.

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

Мы будем использовать следующие библиотеки / пакеты:

Часть 1

• Реагировать - v17.0.2
• React-Hook-Form - v7.11.0

Часть 2

• @ material-ui / core —v4.12.1
• @ material-ui / icons - v4.11.2

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

## For react-hook-formm
npm install --save react-hook-form
&&
## (optional) material-ui
npm install --save @material-ui/core @material-ui/icons

Я использую npm для установки пакетов, но, конечно, вы можете использовать любой менеджер пакетов, который вам нравится, например yarn.

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

1. Нам нужно импортировать useform, useFieldArray & Controller из библиотеки формы react-hook.

Вот как должен выглядеть ваш файл с недавно импортированной библиотекой. Прежде чем я продолжу, документация от react-hook-form содержит очень подробные примеры и объяснения, так что ознакомьтесь с документацией, если вы столкнетесь с какими-либо серьезными проблемами, или напишите мне в комментариях, и я с радостью вам помогу.

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

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

И мы также предоставили control, что в ES6 мы можем использовать небольшой аккуратный трюк, называемый сокращением свойств объекта, узнать о нем больше здесь.

3. Теперь мы можем начать отображать нашу динамическую форму, используя полученную ранее переменную fields. По сути, fields - это массив, содержащий любые вводимые данные, и, поскольку мы не предоставили никаких вводов, fields в настоящее время имеет длину 0.

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

• Мы отображаем каждое поле как item, используя метод JS map, убедитесь, что вы добавили уникальный ключ для каждого элемента, это важно.
• Каждый item по умолчанию является объектом со свойством id, которое мы можем использовать, что очень удобно, форма реакции-крючка не поддерживает плоские массивы. Но не волнуйтесь, мы разберемся с этим позже.
• Для свойства name мы используем шаблонные литералы, не забудьте заменить books именем вашего массива полей и заменить value свойством, которое существует в item. Это будет иметь смысл чуть позже.
• В опоре рендеринга мы передаем функцию, которая возвращает компонент ввода, мы можем передать пользовательский ввод со стилями, если захотим.
• Нам нужно получить аргумент field от этой функции, который автоматически передается Controller, и использовать оператор распространения, чтобы передать эти реквизиты на наш ввод.
• Кнопка добавления использует метод append, это добавит новый объект в конец массива полей, однако нам нужно установить свойства в этом объекте, как я упоминал ранее, плоские массивы не поддерживаются, поэтому для простоты у нас просто есть свойство value для объекта, свойство id, упомянутое ранее, добавляется автоматически.

Объяснения немного длинны, но они здесь, чтобы помочь вам понять, как правильно использовать это, чтобы вы могли создавать свои собственные динамические формы.

Так же, как эта динамическая форма уже работает, нам осталось обработать еще кое-что.

Прямо сейчас наш массив представляет собой массив объектов,

Это то, что мы получаем, когда console.log наши данные, имейте в виду, что они также находятся в форме, поэтому возвращается не только массив, а все данные формы.

Наш массив хранится под именем (books), которое мы указали ранее при использовании ловушки.

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

Мы создали handleOnSubmit функцию для обработки данных нашего массива, как я уже сказал, возвращаются все данные формы, поэтому нам нужно будет деструктурировать их из объекта данных. Затем мы просто сопоставляем данные и возвращаем только значение из каждого book объекта.

Это все, что вам нужно сделать, чтобы создать динамическую форму ввода с помощью response-hook-form.

Надеюсь, вам понравилось руководство с подробными объяснениями, не стесняйтесь сообщить мне, если у вас возникнут проблемы, я буду рад помочь. Придерживайтесь части 2, чтобы узнать, как сделать этот компонент многоразового использования и добавить стили, чтобы сделать его интересным. 👋

Ссылка на песочницу кода находится здесь: https://codesandbox.io/s/dynamic-form-use-field-array-db5sb?file=/src/App.js

Ознакомьтесь с некоторыми предыдущими статьями / руководствами!

Больше контента на plainenglish.io