Kuinka rakentaa muotoja Reactissa React Hook -lomakkeen avulla

Lomakkeiden rakentaminen React-sovelluksessa voi olla monimutkaista ja aikaa vievää. React Hook Form -kirjaston avulla voit helposti lisätä tehokkaita lomakkeita React-sovellukseesi.

React Hook Form on kirjasto lomakkeiden rakentamiseen Reactissa, joka yksinkertaistaa monimutkaisten ja uudelleenkäytettävien lomakkeiden luomista. Jos aiot rakentaa React-sovelluksen, sinun tulee oppia luomaan lomakkeita Reactissa React Hook Form -kirjaston avulla.

React Hook Formin asentaminen

Jotta voit aloittaa React Hook Formin käytön, sinun on asennettava se käyttämällä npm- tai yarn-pakettien hallintaa.

Asenna React Hook Form npm: llä suorittamalla seuraava komento päätteessäsi:

npm asenna react-hook-form

Asenna React Hook Form langalla suorittamalla seuraava komento:

lanka lisää react-hook-form

Lomakkeen luominen React Hook -lomakkeella

Jos haluat luoda lomakkeen React Hook Form -sovelluksella, sinun on käytettävä käyttölomake koukku. The käyttölomake

koukku antaa sinulle pääsyn menetelmiin ja ominaisuuksiin, joita käytät rakentaa ja hallita lomakkeitasi React-sovelluksessasi.

Tässä on esimerkki, joka näyttää kuinka käyttää käyttölomake koukku:

tuonti Reagoi alkaen'reagoi'
tuonti { useForm } alkaen'react-hook-form';
toimintoLomake() {
konst { register, handleSubmit } = useForm();
konst onSubmit = (tiedot) =>konsoli.log (data);
palata (



'teksti' { ...rekisteröi("etunimi")} />
Lähetä</button>
 </form>
 )
}
viedäoletuksena muoto;

React Hook Form -kirjasto käyttää rekisteröidy menetelmä rekisteröidä syötetyt arvot koukkuun. The rekisteröidy -menetelmä yhdistää lomakkeen syöttökentät React Hook Form -kirjastoon, jotta kirjasto voi seurata ja vahvistaa syöttökenttiä.

Yllä olevaan koodilohkoon rekisteröit syötteen nimellä "etunimi". käsitteleLähetä React Hook Form -kirjaston menetelmä käsittelee lomakkeen lähettämisen.

Jotta voit käsitellä lomakkeiden lähetystä, välität takaisinsoittotoiminnon onSubmitissa kohtaan käsitteleLähetä menetelmä. The onSubmitissa funktio vastaanottaa objektin, joka sisältää kaikkien lomakkeen syötteiden arvot.

Vahvista syötteet rekisterimenetelmällä

The rekisteröidy -menetelmän avulla voit määrittää vahvistussääntöjä syöttökentille. Jos haluat lisätä vahvistuksen syöttökenttiin, välität objektin, jossa on vahvistussäännöt, toisena argumenttina rekisteröidy menetelmä.

Niin kuin:

tuonti Reagoi alkaen'reagoi'
tuonti { useForm } alkaen'react-hook-form';
toimintoLomake() {
konst{ register, handleSubmit } = useForm();
konst onSubmit = (tiedot) =>konsoli.log (data);
palata (



'teksti' { ...rekisteröi("etunimi", { edellytetään: totta})} />
'Salasana' { ...rekisteröi("Salasana", { edellytetään: totta, Maksimi pituus: 10})}/>
Lähetä</button>
 </form>
 )
}
viedäoletuksena muoto;

Tässä esimerkissä lisäät vahvistussäännön "etunimi"-syöttökenttään ja kaksi vahvistussääntöä "salasanaan". The edellytetään sääntö määrittää, että käyttäjän on täytettävä syöttökentät, eikä hän voi lähettää lomaketta, jos kentät ovat tyhjiä.

The Maksimi pituus sääntö määrittää syöttöarvon enimmäismäärän aakkoskirjaimia. Sen lisäksi edellytetään ja Maksimi pituus menetelmiä, voit lisätä muita vahvistussääntöjä, kuten min, max, minPituus, kuvio, ja vahvistaa.

min & max

The min sääntö määrittää syöttökentän vähimmäisarvon ja max sääntö määrittää sen maksimiarvon.

Voit käyttää min ja max säännöt numerotyyppisillä syötteillä, kuten tämä:

'määrä' { ...rekisteröi("ikä", {min: 18, max: 35}) } />

Yllä olevan syöttökentän arvon on oltava vähintään 18 ja enintään 35.

minPituus

The minPituus sääntö on samanlainen kuin Maksimi pituus sääntö, mutta asettaa sen sijaan aakkoskirjaimien vähimmäismäärän:

'teksti' { ...rekisteröi("nimi", { minPituus: 10 })}/>

Tässä esimerkissä minLength-sääntö määrittää, että syötteen arvon tulee olla vähintään 10 merkkiä pitkä.

malli ja vahvista

The kuvio sääntö määrittää säännöllisen lausekkeen mallin, jota syötearvon on vastattava. The vahvistaa säännön avulla voit määrittää mukautetun vahvistustoiminnon syötearvon vahvistamiseksi. Joko funktion pitäisi palata totta tai merkkijonovirheilmoitus.

Esimerkiksi:

'teksti' { ...rekisteröi("etunimi", {kuvio: **/^[A-Za-z]+$/**}) } />
'määrä' { ...rekisteröi("testata", {**vahvista: (arvo) => arvo <= 12** }) } />

Tässä esimerkissä "etunimi"-syöte käyttää kuvio sääntö. The kuvio edellyttää, että syöttöarvo sisältää vain aakkosmerkkejä (isot ja pienet kirjaimet).

"Testi"-syöte käyttää vahvistaa sääntö mukautetun vahvistusfunktion määrittämiseksi, joka tarkistaa, onko sen arvo pienempi tai yhtä suuri kuin 12.

Lomakkeen virheiden käsittely

React Hook Form -kirjasto tarjoaa sisäänrakennetun mekanismin JavaScript-virheiden käsittely muodoissasi. The käsitteleLähetä -funktio, jota kutsutaan, kun käyttäjä lähettää lomakkeen, palauttaa lupauksen, joka ratkeaa lomaketietojen kanssa, jos vahvistus onnistuu.

Jos vahvistusvirheitä kuitenkin tapahtuu, lupaus hylätään virheobjektilla, joka sisältää vahvistusvirheet.

Tässä on esimerkki siitä, kuinka käsitellä virheitä käyttämällä käsitteleLähetä toiminto:

tuonti Reagoi alkaen'reagoi'
tuonti { useForm } alkaen'react-hook-form';
toimintoLomake() {
konst { register, handleSubmit, formState: { virheet } } = useForm();
konst onSubmit = (tiedot) =>konsoli.log (data); 
palata (



'teksti' { ...rekisteröi("etunimi", { edellytetään: totta})} />
 {errors.firstname && <jänneväli>Syötä etunimesijänneväli>}
'määrä' { ...rekisteröi("ikä", {min: 18, max: 35,}) } />
 {errors.age?.type 'max' && <jänneväli> Olet liian vanha tälle sivustollejänneväli>}
 {errors.age?.type 'min' && <jänneväli> Olet liian nuori tälle sivustollejänneväli>}
Lähetä</button>
 </form>
 )
}
viedäoletuksena muoto;

Tässä koodilohkossa formState objekti pääsee käsiksi kunkin kentän virheisiin. The virheitä objekti tallentaa kunkin syöttökentän vahvistusvirheet. The virheitä Objekti tuottaa ehdollisesti virhesanoman jokaiselle virheelliselle kentälle.

Varten etunimi syöttökenttä, jos edellytetään sääntöä ei täyty, syöttökentän viereen tulee virheilmoitus "Syötä etunimesi". Jos arvo ikä syöttökenttä on sallitun alueen ulkopuolella, näyttöön tulee virheilmoitus.

Jos arvo on pienempi kuin 18, virheilmoitus on "Olet liian nuori tälle sivustolle", ja jos arvo on suurempi kuin 35, virheviesti on "Olet liian vanha tälle sivustolle".

Nyt voit rakentaa luotettavia lomakkeita Reactissa

Lomakkeiden rakentaminen Reactissa voi olla monimutkainen ja aikaa vievä prosessi. Silti React Hook Form yksinkertaistaa tätä tehtävää tarjoamalla helppokäyttöisen ja joustavan kirjaston lomaketietojen hallintaan ja validointiin.

UseForm-hook-, register- ja handleSubmit-menetelmän avulla lomakkeiden rakentamisesta Reactissa tulee tehokkaampi ja virtaviivaisempi prosessi. Voit luoda toimivia lomakkeita, mikä puolestaan ​​parantaa React-sovellustesi käyttökokemusta ja yleistä laatua.