Направите и потврдите своје Реацт форме уз најмањи напор.

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

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

Инсталирање Реацт Хоок форме

Да бисте почели да користите Реацт Хоок Форм, морате га инсталирати помоћу нпм или иарн менаџера пакета.

Да бисте инсталирали Реацт Хоок Форм користећи нпм, покрените следећу команду у свом терминалу:

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

Да бисте инсталирали Реацт Хоок Форм користећи пређу, покрените следећу команду:

предиво додати реацт-хоок-форм

Креирање обрасца помоћу Реацт Хоок форме

Да бисте креирали образац користећи Реацт Хоок Форм, морате да користите усеФорм кука. Тхе усеФорм

instagram viewer
хоок вам даје приступ методама и својствима које ћете користити изградите и управљајте својим обрасцима у вашој Реацт апликацији.

Ево примера који показује како се користи усеФорм кука:

увоз Реаговати из'реаговати'
увоз { усеФорм } из'реацт-хоок-форм';
функцијаФорма() {
конст { регистер, хандлеСубмит } = усеФорм();
конст онСубмит = (података) =>конзола.лог (подаци);


повратак (




'текст' { ...регистровати("име")} />


извозУобичајено Форма;

Реацт Хоок Форм библиотека користи регистровати метод да региструјете ваше улазне вредности на куку. Тхе регистровати метода повезује поља за унос форме са Реацт Хоок Форм библиотеком тако да библиотека може да прати и проверава поља за унос.

У блоку кода изнад, региструјете унос са именом „име“. хандлеСубмит метод библиотеке Реацт Хоок Форм управља подношењем обрасца.

Да бисте управљали слањем обрасца, проследићете функцију повратног позива онСубмит до хандлеСубмит методом. Тхе онСубмит функција ће примити објекат који садржи вредности свих уноса форме.

Потврдите уносе помоћу методе регистра

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

Овако:

увоз Реаговати из'реаговати'
увоз { усеФорм } из'реацт-хоок-форм';
функцијаФорма() {


конст{ регистер, хандлеСубмит } = усеФорм();


конст онСубмит = (података) =>конзола.лог (подаци);


повратак (




'текст' { ...регистровати("име", { потребан: истина})} />
'Лозинка' { ...регистровати("Лозинка", { потребан: истина, максимална дужина: 10})}/>


извозУобичајено Форма;

У овом примеру додајете правило валидације у поље за унос „фирстнаме“ и два правила провере у „лозинку“. Тхе потребан правило одређује да корисник треба да попуни поља за унос и не може да пошаље образац ако су поља празна.

Тхе максимална дужина правило поставља максималан број абецедних слова улазне вредности. Осим на потребан и максимална дужина методе, можете додати друга правила валидације, као што су мин, мак, минЛенгтх, шаблон, и валидирати.

мин & мак

Тхе мин правило специфицира минималну вредност за поље за унос и мак правило одређује његову максималну вредност.

Можете користити мин и мак правила са уносима типа броја, овако:

'број' { ...регистровати("старост", {мин: 18, мак: 35}) } />

Вредност горњег поља за унос мора бити најмање 18 и не већа од 35.

минЛенгтх

Тхе минЛенгтх правило је слично као максимална дужина правило, али уместо тога поставља минимални број абецедних слова:

'текст' { ...регистровати("име", { минЛенгтх: 10 })}/>

У овом примеру, правило минЛенгтх наводи да вредност уноса треба да буде дуга најмање 10 знакова.

шаблон и валидација

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

На пример:

'текст' { ...регистровати("име", {шаблон: **/^[A-Za-z]+$/**}) } />
'број' { ...регистровати("тест", {**потврди: (вредност) => вредност <= 12** }) } />

У овом примеру, унос „име“ користи шаблон владати. Тхе шаблон захтева да улазна вредност садржи само абецедне знакове (велика и мала слова).

Улаз „тест“ користи валидирати правило за дефинисање прилагођене функције валидације која проверава да ли је њена вредност мања или једнака 12.

Руковање грешкама у обрасцу

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

Међутим, ако дође до грешке у валидацији, обећање се одбија са објектом грешке који садржи грешке у валидацији.

Ево примера како да поступате са грешкама користећи хандлеСубмит функција:

увоз Реаговати из'реаговати'
увоз { усеФорм } из'реацт-хоок-форм';
функцијаФорма() {
конст { регистер, хандлеСубмит, формСтате: { грешке } } = усеФорм();
конст онСубмит = (података) =>конзола.лог (подаци); 


повратак (




'текст' { ...регистровати("име", { потребан: истина})} />
 {еррорс.фирстнаме && <спан>Унесите своје имеспан>}


'број' { ...регистровати("старост", {мин: 18, мак: 35,}) } />
 {еррорс.аге?.типе 'мак' && <спан> Престари сте за овај сајтспан>}
 {еррорс.аге?.типе 'мин' && <спан> Премлади сте за овај сајтспан>}


извозУобичајено Форма;

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

За име поље за унос, ако је потребан правило није испуњено, порука о грешци — „Унесите своје име“ — ће се приказати поред поља за унос. Ако је вредност од старости поље за унос је изван дозвољеног опсега, приказаће се порука о грешци.

Ако је вредност мања од 18, порука о грешци ће бити „Премлади сте за овај сајт“, а ако је вредност већа од 35, порука о грешци ће бити „Престари сте за овај сајт“.

Сада можете да направите поуздане форме у Реацт-у

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

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