Kā veidot veidlapas programmā React, izmantojot React Hook formu

Veidlapu veidošana React lietojumprogrammā var būt sarežģīta un laikietilpīga. Izmantojot React Hook Form bibliotēku, varat viegli pievienot augstas veiktspējas veidlapas savai React lietojumprogrammai.

React Hook Form ir bibliotēka React formu veidošanai, kas vienkāršo sarežģītu un atkārtoti lietojamu veidlapu izveides procesu. Ja vēlaties izveidot React lietotni, jums vajadzētu uzzināt, kā izveidot veidlapas programmā React, izmantojot React Hook Form bibliotēku.

React Hook Form instalēšana

Lai sāktu lietot React Hook Form, tā ir jāinstalē, izmantojot npm vai yarn pakotņu pārvaldniekus.

Lai instalētu React Hook Form, izmantojot npm, terminālī palaidiet šādu komandu:

npm instalēt react-hook-form

Lai instalētu React Hook Form, izmantojot dziju, palaidiet šo komandu:

dzija pievienot react-hook-form

Veidlapas izveide, izmantojot React Hook veidlapu

Lai izveidotu veidlapu, izmantojot React Hook Form, jums ir jāizmanto lietošanas veidlapa

āķis. The lietošanas veidlapa hook sniedz piekļuvi metodēm un rekvizītiem, kurus izmantosit veidojiet un pārvaldiet savas veidlapas savā React lietojumprogrammā.

Šeit ir piemērs, kas parāda, kā lietot lietošanas veidlapa āķis:

imports Reaģēt no'reaģēt'
imports { useForm } no'reakcijas āķa forma';
funkcijuVeidlapa() {
konst { register, handleSubmit } = useForm();
konst onSubmit = (datus) =>konsole.log (dati);
atgriezties (



'teksts' { ...reģistrēties("vārds")} />
Iesniegt</button>
 </form>
 )
}
eksportētnoklusējuma Veidlapa;

React Hook Form bibliotēka izmanto reģistrēties metode, lai reģistrētu ievades vērtības āķī. The reģistrēties metode savieno veidlapas ievades laukus ar React Hook Form bibliotēku, lai bibliotēka varētu izsekot un apstiprināt ievades laukus.

Iepriekš esošajā koda blokā jūs reģistrējat ievadi ar nosaukumu “vārds”. rokturisIesniegt React Hook Form bibliotēkas metode apstrādā veidlapas iesniegšanu.

Lai apstrādātu veidlapas iesniegšanu, jums būs jānodod atzvanīšanas funkcija onSubmit uz rokturisIesniegt metodi. The onSubmit funkcija saņems objektu, kurā ir visu formas ievades vērtības.

Apstipriniet ievades ar reģistrēšanas metodi

The reģistrēties metode ļauj iestatīt validācijas noteikumus ievades laukiem. Lai ievades laukiem pievienotu apstiprinājumu, kā otro argumentu nosūtiet objektu ar validācijas noteikumiem reģistrēties metodi.

Tā kā:

imports Reaģēt no'reaģēt'
imports { useForm } no'reakcijas āķa forma';
funkcijuVeidlapa() {
konst{ register, handleSubmit } = useForm();
konst onSubmit = (datus) =>konsole.log (dati);
atgriezties (



'teksts' { ...reģistrēties("vārds", { nepieciešams: taisnība})} />
'parole' { ...reģistrēties("parole", { nepieciešams: taisnība, maxLength: 10})}/>
Iesniegt</button>
 </form>
 )
}
eksportētnoklusējuma Veidlapa;

Šajā piemērā ievades laukam “firstname” ir jāpievieno validācijas kārtula, bet “parolei” jāpievieno divi validācijas noteikumi. The nepieciešams noteikums norāda, ka lietotājam ir jāaizpilda ievades lauki, un viņš nevar iesniegt veidlapu, ja lauki ir tukši.

The maksimālais garums noteikums iestata ievades vērtības maksimālo alfabēta burtu skaitu. Neskaitot nepieciešams un maksimālais garums metodes, varat pievienot citus validācijas noteikumus, piemēram, min, maks, minLength, modelis, un apstiprināt.

min un maks

The min noteikums norāda minimālo vērtību ievades laukam un maks noteikums norāda tā maksimālo vērtību.

Jūs varat izmantot min un maks noteikumi ar skaitļu tipa ievadi, piemēram:

"numurs" { ...reģistrēties("vecums", {min: 18, maks: 35}) } />

Iepriekš esošā ievades lauka vērtībai ir jābūt vismaz 18 un ne lielākai par 35.

minLength

The minLength noteikums ir līdzīgs maxLength noteikums, bet tā vietā iestata minimālo alfabētisko burtu skaitu:

'teksts' { ...reģistrēties("vārds", { minLength: 10 })}/>

Šajā piemērā kārtula minLength nosaka, ka ievades vērtībai ir jābūt vismaz 10 rakstzīmes garai.

modelis un apstiprināt

The modelis noteikums norāda regulāras izteiksmes modeli, kuram ir jāatbilst ievades vērtībai. The apstiprināt Noteikums ļauj definēt pielāgotu validācijas funkciju, lai apstiprinātu ievades vērtību. Funkcijai ir jāatgriežas taisnība vai virknes kļūdas ziņojums.

Piemēram:

'teksts' { ...reģistrēties("vārds", {modelis: **/^[A-Za-z]+$/**}) } />
"numurs" { ...reģistrēties("pārbaude", {**apstiprināt: (vērtību) => vērtība <= 12** }) } />

Šajā piemērā ievade “firstname” izmanto modelis noteikums. The modelis pieprasa, lai ievades vērtībā būtu tikai alfabēta rakstzīmes (lielie un mazie burti).

“Pārbaudes” ievade izmanto apstiprināt kārtula, lai definētu pielāgotu validācijas funkciju, kas pārbauda, ​​vai tās vērtība ir mazāka vai vienāda ar 12.

Veidlapas kļūdu apstrāde

React Hook Form bibliotēka nodrošina iebūvētu mehānismu apstrādājot JavaScript kļūdas jūsu formās. The rokturisIesniegt funkcija, kas tiek izsaukta, kad lietotājs iesniedz veidlapu, atgriež solījumu, kas tiek atrisināts ar veidlapas datiem, ja validācija ir veiksmīga.

Tomēr, ja rodas validācijas kļūdas, solījums tiek noraidīts ar kļūdas objektu, kurā ir validācijas kļūdas.

Šeit ir piemērs, kā rīkoties ar kļūdām, izmantojot rokturisIesniegt funkcija:

imports Reaģēt no'reaģēt'
imports { useForm } no'reakcijas āķa forma';
funkcijuVeidlapa() {
konst { register, handleSubmit, formState: {kļūdas}} = useForm();
konst onSubmit = (datus) =>konsole.log (dati); 
atgriezties (



'teksts' { ...reģistrēties("vārds", { nepieciešams: taisnība})} />
 {errors.firstname && <span>Lūdzu, ievadiet savu vārduspan>}
"numurs" { ...reģistrēties("vecums", {min: 18, maks: 35,}) } />
 {errors.age?.type 'max' && <span> Jūs esat pārāk vecs šai vietneispan>}
 {errors.age?.type 'min' && <span> Jūs esat pārāk jauns šai vietneispan>}
Iesniegt</button>
 </form>
 )
}
eksportētnoklusējuma Veidlapa;

Šajā koda blokā formState objekts iegūst piekļuvi katra lauka kļūdām. The kļūdas objekts saglabā validācijas kļūdas katram ievades laukam. The kļūdas objekts nosacīti parāda kļūdas ziņojumu katram nederīgam laukam.

Priekš vārds ievades lauks, ja nepieciešams noteikums netiek izpildīts, blakus ievades laukam tiks parādīts kļūdas ziņojums — "Lūdzu, ievadiet savu vārdu". Ja vērtība vecums ievades lauks atrodas ārpus atļautā diapazona, tiks parādīts kļūdas ziņojums.

Ja vērtība ir mazāka par 18, kļūdas ziņojums būs "Jūs esat pārāk jauns šai vietnei", un, ja vērtība ir lielāka par 35, kļūdas ziņojums būs "Jūs esat pārāk vecs šai vietnei".

Tagad pakalpojumā React varat izveidot uzticamas veidlapas

Veidlapu veidošana programmā React var būt sarežģīts un laikietilpīgs process. Tomēr React Hook Form vienkāršo šo uzdevumu, nodrošinot viegli lietojamu un elastīgu bibliotēku veidlapu datu pārvaldībai un validācijai.

Izmantojot useForm hook, reģistrēšanas metodi un HandSubmit metodi, veidlapu veidošana programmā React kļūst par efektīvāku un racionalizētāku procesu. Varat izveidot funkcionālas veidlapas, tādējādi uzlabojot savu React lietojumprogrammu lietotāja pieredzi un vispārējo kvalitāti.