Formik is een formulierbeheerbibliotheek die componenten en hooks biedt om het proces van het maken van React-formulieren te vergemakkelijken. Formik zorgt voor formulierstatussen, validatie en foutafhandelingen voor u, wat het gemakkelijk maakt om gebruikersgegevens te verzamelen en op te slaan.

In deze tutorial leer je hoe je met Formik een registratieformulier kunt maken in React. Om mee te gaan, moet u vertrouwd zijn met het werken met React-haken.

Maak een React-app

Gebruik maken-reageren-app om maak een nieuw React-project aan:

npx maak-reageer-app formik-formulier

Navigeer nu naar de formik-form/src map en verwijder alle bestanden behalve App.js.

Maak vervolgens een nieuw bestand en geef het een naam Register.js. Hier voegt u uw formulier toe. Vergeet niet om het te importeren in App.js.

Een reactieformulier maken

U kunt React-formulieren maken met behulp van gecontroleerde componenten of ongecontroleerde componenten. Een gecontroleerde component is een component waarvan de formuliergegevens door React zelf worden verwerkt. Een ongecontroleerde component is een component waarvan de formuliergegevens worden verwerkt door de DOM.

instagram viewer

De officiële Reageer documenten raden aan om gecontroleerde componenten te gebruiken. Ze laten u de formuliergegevens in de lokale staat bijhouden en hebben daarom volledige controle over het formulier.

Hieronder ziet u een voorbeeld van een formulier dat is gemaakt met een gecontroleerde component.

importeer { useState } van "reageren";
const Registreren = () => {
const [e-mail, setemail] = useState("");
const [wachtwoord, setpassword] = useState("");
const handleSubmit = (gebeurtenis) => {
event.preventDefault();
console.log (e-mail);
};
const handleEmail = (gebeurtenis) => {
setemail (gebeurtenis.doel.waarde);
};
const handlePassword = (gebeurtenis) => {
setpassword (gebeurtenis.doel.waarde);
};
opbrengst (

id="e-mail"
naam = "e-mail"
typ = "e-mail"
placeholder="Uw e-mail"
waarde={e-mail}
onChange={handleEmail}
/>
id="wachtwoord"
naam = "wachtwoord"
typ = "wachtwoord"
placeholder="Uw wachtwoord"
waarde={wachtwoord}
onChange={handlePassword}
/>


);
};
export standaard Register;

In de bovenstaande code bent u: de staat initialiseren en het creëren van een handlerfunctie voor elk invoerveld. Hoewel dit werkt, kan uw code gemakkelijk repetitief en rommelig worden, vooral met veel invoervelden. Het toevoegen van validatie en het afhandelen van foutmeldingen is een andere uitdaging.

Formik heeft tot doel deze problemen te verminderen. Het maakt het gemakkelijk om formulierstatus te verwerken, formuliergegevens te valideren en in te dienen.

Formik toevoegen om te reageren

Voor gebruik formi, voeg het toe aan uw project met npm.

npm formi installeren

Om Formik te integreren, gebruikt u de gebruikFormik haak. In Register.js, importeer useFormik bovenaan het bestand:

importeer { useFormik } van "formik"

De eerste stap is het initialiseren van de formulierwaarden. In dit geval initialiseert u het e-mailadres en wachtwoord.

const formik = gebruikFormik({
initiële Waarden: {
e-mail: "",
wachtwoord: "",
},
onSubmit: waarden => {
// verwerken formulierinzending
},
});

U voegt ook de functie onSubmit toe die de formulierwaarden ontvangt en de indiening van het formulier afhandelt. Voor een registratieformulier als dit kan dit betekenen dat u een nieuwe gebruiker in de database moet maken.

De volgende stap is het gebruik van de formi object om de formulierwaarden in en uit de staat te krijgen.


id="e-mail"
naam = "e-mail"
typ = "e-mail"
placeholder="Uw e-mail"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
id="wachtwoord"
naam = "wachtwoord"
typ = "wachtwoord"
placeholder="Uw wachtwoord"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>


In de bovenstaande code ben je:

  • De invoervelden een. geven ID kaart en naam waarde gelijk aan die gebruikt tijdens initialisatie in de gebruikFormik haak.
  • Toegang krijgen tot de waarde van een veld, de naam gebruiken om het op te halen uit formik.values.
  • Verbindend formik.handleWijzigen naar de onChange-gebeurtenis om de invoerwaarden weer te geven terwijl de gebruiker typt.
  • Gebruik makend van formik.handleBlur om bezochte velden bij te houden.
  • Verbindend formik.handleVerzenden naar de opVerzenden gebeurtenis om de. te activeren opVerzenden functie die u hebt toegevoegd aan de gebruikFormik haak.

Formuliervalidatie inschakelen

Bij het maken van een formulier is het belangrijk om de gebruikersinvoer te valideren zodra deze wordt gemaakt gebruikersverificatie gemakkelijk omdat u alleen gegevens in het juiste formaat opslaat. In uw formulier kunt u bijvoorbeeld controleren of het opgegeven e-mailadres geldig is en of het wachtwoord langer is dan 8 tekens.

Om het formulier te valideren, definieert u een validatiefunctie die de formulierwaarden accepteert en een foutobject retourneert.

Als u de validatiefunctie toevoegt aan: gebruikFormik, elke gevonden validatiefout is beschikbaar in Formik.fouten, geïndexeerd op de invoernaam. U kunt bijvoorbeeld toegang krijgen tot een fout over het e-mailveld met Formik.errors.e-mail.

In Register.js, maak de valideren functie en neem het op in gebruikFormik.

const formik = gebruikFormik({
initiële Waarden: {
e-mail: "",
wachtwoord: "",
},
valideren: () => {
const fouten = {};
console.log (fouten)
if (!formik.values.email) {
errors.email = "Vereist";
} anders als (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test (formik.values.email)
) {
errors.email = "Ongeldig e-mailadres";
}
if (!formik.values.password) {
errors.password = "Vereist";
} else if (formik.values.password.length < 8) {
errors.password = "Moet 8 tekens of meer zijn";
}
fouten retourneren;
},
onSubmit: (waarden) => {
console.log("ingediend!");
// omgaan met inzending
},
});

Foutafhandeling toevoegen

Geef vervolgens de foutmeldingen weer als ze bestaan. Gebruik Formik.aangeraakt om te controleren of het veld is bezocht. Dit voorkomt dat er een fout wordt weergegeven voor een veld dat de gebruiker nog niet heeft bezocht.


id="e-mail"
naam = "e-mail"
typ = "e-mail"
placeholder="Uw e-mail"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email?
{formik.errors.email}
: nul}
id="wachtwoord"
naam = "wachtwoord"
typ = "wachtwoord"
placeholder="Uw wachtwoord"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.password && formik.errors.password?
{formik.fouten.wachtwoord}
: nul}


Gegevens valideren met Yup

Formik biedt een eenvoudigere manier om formulieren te valideren met behulp van de JEP bibliotheek. Installeer yup om te beginnen.

npm installeren yup

Importeren JEP in Register.js.

importeer * als Yup van "yup"

In plaats van uw eigen aangepaste validatiefunctie te schrijven, gebruikt u Yup om te controleren of het e-mailadres en wachtwoord geldig zijn.

const formik = gebruikFormik({
initiële Waarden: {
e-mail: "",
wachtwoord: "",
},
validationSchema: Yup.object().shape({
e-mail: Yup.string()
.email("Ongeldig e-mailadres")
.required("Vereist"),
wachtwoord: Yup.string()
.min (8, "Moet 8 tekens of meer bevatten")
.required("Vereist")
}),
onSubmit: (waarden) => {
console.log("ingediend!");
// omgaan met inzending
},
});

En dat is het! Je hebt een eenvoudig registratieformulier gemaakt met Formik en Yup.

Alles afronden

Formulieren vormen een integraal onderdeel van elke toepassing, omdat u hiermee gebruikersinformatie kunt verzamelen. In React kan het maken van formulieren een pijnlijke ervaring zijn, vooral als je te maken hebt met veel gegevens of meerdere formulieren. Een tool als Formik biedt een gemakkelijke en naadloze manier om formulierwaarden op te halen en te valideren.

10 Reageer best practices die u in 2022 moet volgen

Lees volgende

DelenTweetenDelenE-mail

Gerelateerde onderwerpen

  • Programmeren
  • Programmeren
  • JavaScript
  • Reageer

Over de auteur

Mary Gathoni (14 artikelen gepubliceerd)

Mary Gathoni is een softwareontwikkelaar met een passie voor het maken van technische inhoud die niet alleen informatief maar ook boeiend is. Als ze niet aan het coderen of schrijven is, gaat ze graag met vrienden om en is ze graag buiten.

Meer van Mary Gathoni

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren