Како користити Формик за креирање образаца у Реацт-у

Формик је библиотека за управљање формама која обезбеђује компоненте и куке за олакшавање процеса креирања Реацт образаца. Формик се брине за стања обрасца, валидацију и руковаоце грешкама за вас што олакшава прикупљање и складиштење корисничких података.

У овом водичу ћете научити како можете да креирате образац за регистрацију у Реацт-у користећи Формик. Да бисте то пратили, требало би да вам буде удобно да радите са Реацт кукицама.

Направите Реацт апликацију

Користите апликацију цреате-реацт-апп да креирајте нови Реацт пројекат:

нпк цреате-реацт-апп формик-форм

Сада, идите на формик-форм/срц фолдер и избришите све датотеке осим Апп.јс.

Затим креирајте нову датотеку и дајте јој назив Регистер.јс. Овде ћете додати свој образац. Не заборавите да га увезете Апп.јс.

Направите Реацт образац

Можете креирати Реацт форме користећи или контролисане или неконтролисане компоненте. Контролисана компонента је она чијим подацима обрасца рукује сам Реацт. Неконтролисана компонента је она чијим подацима обрасца рукује ДОМ.

Званични Реацт доцс препоручујемо коришћење контролисаних компоненти. Они вам омогућавају да пратите податке обрасца у локалном стању и стога имате потпуну контролу над обрасцем.

Испод је пример обрасца креираног коришћењем контролисане компоненте.

импорт { усеСтате } из "реацт";
цонст Регистер = () => {
 цонст [емаил, сетемаил] = усеСтате("");
 цонст [пассворд, сетпассворд] = усеСтате("");
 цонст хандлеСубмит = (догађај) => {
 евент.превентДефаулт();
 цонсоле.лог (е-пошта);
 };
 цонст хандлеЕмаил = (догађај) => {
 сетемаил (евент.таргет.валуе);
 };
 цонст хандлеПассворд = (догађај) => {
 сетпассворд (евент.таргет.валуе);
 };
 повратак (


 ид="е-пошта"
 наме="е-маил"
 типе="е-маил"
 плацехолдер="Ваша е-пошта"
 валуе={емаил}
 онЦханге={хандлеЕмаил}
 />
 ид="лозинка"
 наме="лозинка"
 типе="пассворд"
 плацехолдер="Ваша лозинка"
 вредност={лозинка}
 онЦханге={хандлеПассворд}
 />




 );
};
екпорт дефаулт Регистер;

У горњем коду сте иницијализација стања и креирање функције руковаоца за свако поље за унос. Иако ово функционише, ваш код се лако може понављати и затрпати, посебно са многим пољима за унос. Додавање валидације и руковања порукама о грешци је још један изазов.

Формик има за циљ смањење ових проблема. Олакшава руковање стањем обрасца, валидацију и слање података обрасца.

Додајте Формик у Реацт

Пре употребе формик, додајте га у свој пројекат користећи нпм.

нпм инсталл формик

Да бисте интегрисали Формик, користићете усеФормик кука. Ин Регистер.јс, увезите усеФормик на врх датотеке:

импорт { усеФормик } из "формик"

Први корак је иницијализација вредности форме. У овом случају, ви ћете иницијализовати адресу е-поште и лозинку.

цонст формик = усеФормик({
 почетне вредности: {
 емаил: "",
 Лозинка: "",
 },
 онСубмит: вредности => {
// обрађује подношење обрасца
 },
});

Такође додајете функцију онСубмит која прима вредности обрасца и управља слањем обрасца. За образац за регистрацију као што је овај, то би могло значити креирање новог корисника у бази података.

Следећи корак је коришћење формик објекат да се вредности форме уносе и излазе из стања.

 ид="е-пошта"
 наме="е-маил"
 типе="е-маил"
 плацехолдер="Ваша е-пошта"
 валуе={формик.валуес.емаил}
 онЦханге={формик.хандлеЦханге}
 онБлур={формик.хандлеБлур}
 />
 ид="лозинка"
 наме="лозинка"
 типе="пассворд"
 плацехолдер="Ваша лозинка"
 валуе={формик.валуес.пассворд}
 онЦханге={формик.хандлеЦханге}
 онБлур={формик.хандлеБлур}
 />

У горњем коду, ви сте:

• Давање поља за унос ан ид и име вредност једнака оној која се користи током иницијализације у усеФормик кука.
• Приступ вредности поља, коришћење његовог имена за преузимање формик.валуес.
• Везивање формик.хандлеЦханге на догађај онЦханге да бисте приказали улазне вредности као типове корисника.
• Користећи формик.хандлеБлур да води евиденцију о посећеним пољима.
• Везивање формик.хандлеСубмит до онСубмит догађај који покреће онСубмит функцију коју сте додали у усеФормик кука.

Омогућите валидацију обрасца

Приликом креирања обрасца, важно је да потврдите кориснички унос како он прави Идентификација корисника лако јер податке чувате само у исправном формату. У свом обрасцу, на пример, можете да проверите да ли је дата адреса е-поште важећа и да ли лозинка има више од 8 карактера.

Да бисте потврдили образац, дефинишите функцију валидације која прихвата вредности обрасца и враћа објекат грешке.

Ако додате функцију валидације у усеФормик, свака пронађена грешка у валидацији биће доступна у Формик.грешке, индексирано на називу улаза. На пример, можете приступити грешци у пољу е-поште користећи Формик.еррорс.емаил.

Ин Регистер.јс, креирајте валидирати функцију и укључити је у усеФормик.

цонст формик = усеФормик({
 почетне вредности: {
 емаил: "",
 Лозинка: "",
 },
 валидирати: () => {
 цонст грешке = {};
 цонсоле.лог (грешке)
 иф (!формик.валуес.емаил) {
 еррорс.емаил = "Обавезно";
 } иначе ако (
 !/^[А-З0-9._%+-]+@[А-З0-9.-]+\\.[А-З]{2,4}$/и.тест (формик.валуес.емаил)
 ) {
 еррорс.емаил = "Неважећа адреса е-поште";
 }
 иф (!формик.валуес.пассворд) {
 еррорс.пассворд = "Обавезно";
 } елсе иф (формик.валуес.пассворд.ленгтх < 8) {
 еррорс.пассворд = "Мора имати 8 знакова или више";
 }
 повратне грешке;
 },
 онСубмит: (вредности) => {
 цонсоле.лог("послато!");
 // обрађује подношење
 },
});

Додајте руковање грешкама

Затим прикажите поруке о грешци ако постоје. Користите Формик.дирнут да провери да ли је терен посећен. Ово спречава приказивање грешке за поље које корисник још увек није посетио.

 ид="е-пошта"
 наме="е-маил"
 типе="е-маил"
 плацехолдер="Ваша е-пошта"
 валуе={формик.валуес.емаил}
 онЦханге={формик.хандлеЦханге}
 онБлур={формик.хандлеБлур}
 />
 {формик.тоуцхед.емаил && формик.еррорс.емаил? 
{формик.еррорс.емаил}
: нула}
 ид="лозинка"
 наме="лозинка"
 типе="пассворд"
 плацехолдер="Ваша лозинка"
 валуе={формик.валуес.пассворд}
 онЦханге={формик.хандлеЦханге}
 онБлур={формик.хандлеБлур}
 />
 {формик.тоуцхед.пассворд && формик.еррорс.пассворд? 
{формик.еррорс.пассворд}
: нула}

Потврдите податке помоћу Иуп

Формик пружа лакши начин за валидацију образаца помоћу аха библиотека. Инсталирајте иуп да бисте започели.

нпм инсталл иуп

Увоз аха ин Регистер.јс.

увози * као да из "да"

Уместо да пишете сопствену прилагођену функцију провере ваљаности, користите Иуп да проверите да ли су е-пошта и лозинка исправни.

цонст формик = усеФормик({
 почетне вредности: {
 емаил: "",
 Лозинка: "",
 },
 валидатионСцхема: Иуп.објецт().схапе({
 емаил: Да.стринг()
 .емаил("Неважећа адреса е-поште")
 .рекуиред("Обавезно"),
 лозинка: Да.стринг()
 .мин (8, „Мора бити 8 знакова или више“)
 .рекуиред("Обавезно")
 }),
 онСубмит: (вредности) => {
 цонсоле.лог("послато!");
// обрађује подношење
 },
});

И то је то! Направили сте једноставан образац за регистрацију користећи Формик и Иуп.

Враппинг Еверитхинг Уп

Обрасци су саставни део сваке апликације јер вам омогућавају да прикупљате корисничке податке. У Реацт-у, креирање образаца може бити болно искуство, посебно ако имате посла са пуно података или више образаца. Алат као што је Формик пружа лак и беспрекоран начин преузимања и провере вредности обрасца.

10 најбољих пракси Реацт-а које треба да следите у 2022

Реад Нект

О аутору