Внедряването на условни полета с помощта на React Hook Form в react/nextJS всъщност е доста просто и може да създаде мощно потребителско изживяване. Ето как.

демонстрация: https://codesandbox.io/s/chakra-ui-conditional-fields-pt4ivf

Предпоставки:

  • Основни познания за React Hook Form 7
  • Потребителски интерфейс на Chakra (или друга библиотека с потребителски интерфейси)
  • Основни познания за NextJS/React

Приготвяме се да започнем

В тази статия ще използвам популярната UI библиотека Chakra UI в проект NextJS, за да ви науча как да внедрявате полета с условни формуляри с помощта на библиотеката за валидиране на формуляри React Hook Form. Същите концепции могат да се използват и за други UI библиотеки и в крайна сметка трябва да завършим с нещо подобно.

Настройвам

Първо бягай

yarn create next-app

за създаване на нов следващ js проект (прочетете повече тук)

тогава

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 react-hook-form

за да инсталирате необходимите зависимости (Chakra UI и React Hook Form) След това в _app.js обвийте компонента на вашето приложение в ChakraUIProvider, така че да можете да наследите темата по подразбиране, която Chakra UI предоставя извън кутията. (Повече подробности за настройката на потребителския интерфейс на Chakra можете да намерите тук)

В този формуляр ще създам регистрационен формуляр, който приема 2 редовни входа за собственото и фамилното име на потребителя, както и условен набор от полета, към които потребителят може да добави още, за да добави произволен брой трудов опит, който е имал. Не е добавена проверка, тъй като това е извън обхвата на този урок.

Персонализирани полета за въвеждане

Създадох 2 вида персонализирани компоненти за въвеждане, за да направя кода си по-използваем многократно. Падащо меню Изберете компонент и компонент за въвеждане на текст. Предадох всички необходими подпори надолу в компонентите и функциите за регистриране, етикет и име както в персонализираните входове, така и в полето за персонализиран избор, също така предадох опциите, от които потребителят може да избира надолу към полето за персонализиран избор .

Внедряване на формата

Формата за кука на React предоставя кука useForm, която се използва за обработка на валидиране и изпращане на формуляр („прочетете повече тук“). Добавих стойностите по подразбиране за формуляра като аргумент в моята кука useForm (аргументите по подразбиране са препоръчителни, но не са задължителни). В index.js деконструирах някои от свойствата, които ще ми трябват, а именно функциите register, control и handleSubmit.

Прехвърлих моя VStack компонент като HTML ‹form› таг, използвайки 'as' prop (може да се използва и роден ‹form› HTML таг, ако използвате друга UI библиотека), който е обвит около всички мои други полета за въвеждане и се предава създаде функция onSubmit, която се предава на ‹form› и предаде функцията handleSubmit в подложката onSubmit с моята функция onSubmit като аргумент. (проп onSubmit и функцията onSubmit са случайно наречени еднакви и НЕ са едно и също нещо, в случай че е объркващо). Повече подробности за внедряването на React Hook Form във вашия проект можете да намерите тук.

Условни полета, използващи useFieldArray

След като настроим всичко, можем да внедрим нашите условни полета, като използваме куката useFieldArray, експортирана от React Hook Form. Аргументът за име е задължителен, а контролът не е задължителен, ако използвате FormContext (в този случай не сме, така че е задължителен).

Контролният аргумент казва на куката useFieldArray от коя форма трябва да бъде част (в този случай тази, която създадохме с куката useForm), а полето за име казва на куката useFieldArray в кое поле да вмъкне незадължителните полета.

Има и друг аргумент, наречен shouldUnregister, който не сме използвали, но по същество просто дерегистрира целия масив от полета при демонтиране (прочетете документите тук)

Деконструирах полетата, методите за добавяне и премахване и стойностите, върнати от куката useFieldArray. Куката всъщност връща повече полезни стойности и методи, но това бяха единствените 3, от които се нуждаехме за тази демонстрация.

fields е масив, който можем да картографираме. Полетата връщат обратно извикване на обекта на компонента и id. Идентификаторът трябва да се използва като ключова опора на вашата карта, за разлика от индекса, докато обектът не се използва в този случай. Вторият аргумент във функцията map връща индекса за картата.

Това идва интересната част. За всеки вход на картата трябва да използваме интерполация на низ за проп на името, предадено в персонализирания вход, за да сме сигурни, че всеки от динамичните входове е регистриран правилно в куката useForm. Използвайки индекса в обратното извикване, ние сме в състояние да регистрираме правилно и да подадем данни към правилното поле за въвеждане в useForm.

Манипулиране на броя на условните полета

Използвайки методите, предоставени от куката useFieldArray, вие сте в състояние доста лесно да манипулирате масива. В този случай използвахме метода за премахване от куката, в която предадохме индекса, така че когато потребителят щракне върху бутона „X“, съответното условно поле с индекса се изтрива.

Включих също бутон „Добавяне на опит“, който добавя друг обект в края на масива и добавя друг ред условни полета. Този метод за добавяне приема аргумент от стойностите по подразбиране на полетата, които искате да добавите. Има още методи, които можете да използвате, за да манипулирате масива, които можете да намерите в документите.

И това е! 🎉 успешно внедрихте условни полета. Уведомете ме, ако имате въпроси в коментарите по-долу!