Formik gebruiken om formulieren te maken in React
Formik maakt het maken en werken van React-formulieren veel eenvoudiger. Uitvinden hoe!
Formik is een formulierbeheerbibliotheek die componenten en hooks biedt om het proces van het maken van React-formulieren te vergemakkelijken. Formik verzorgt de formulierstatussen, validatie en foutafhandelaars voor u, waardoor u eenvoudig gebruikersgegevens kunt verzamelen en opslaan.
In deze tutorial leert u hoe u met Formik een registratieformulier in React kunt maken. Om mee te gaan, moet u vertrouwd zijn met het werken met React-haken.
Maak een React-app
Gebruik create-react-app om een nieuw React-project te maken:
npx create-react-app formik-form
Navigeer nu naar de map formik-form/src en verwijder alle bestanden behalve App.js.
Maak vervolgens een nieuw bestand en noem dit Register.js. Hier voegt u uw formulier toe. Vergeet niet om het te importeren in App.js.
Maak een reactieformulier
U kunt React-formulieren maken met gecontroleerde componenten of ongecontroleerde componenten. Een gecontroleerde component is een component waarvan de formuliergegevens door React zelf worden afgehandeld. Een ongecontroleerde component is een component waarvan de formuliergegevens door de DOM worden verwerkt.
De officiële React-documenten raden aan gecontroleerde componenten te gebruiken. Hiermee kunt u de formuliergegevens in de lokale staat bijhouden en heeft u daarom volledige controle over het formulier.
Hieronder ziet u een voorbeeld van een formulier dat is gemaakt met behulp van een gecontroleerde component.
import { useState } from "react";
const Register = () => {
const [email, setemail] = useState("");
const [password, setpassword] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
console.log(email);
};
const handleEmail = (event) => {
setemail(event.target.value);
};
const handlePassword = (event) => {
setpassword(event.target.value);
};
return (
<form className="register-form" onSubmit={handleSubmit}>
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={email}
onChange={handleEmail}
/>
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={password}
onChange={handlePassword}
/>
<input type="submit" value="Submit" />
</form>
);
};
export default Register;
In de bovenstaande code initialiseert u de status en maakt u een handlerfunctie voor elk invoerveld. Hoewel dit werkt, kan uw code gemakkelijk repetitief en rommelig worden, vooral als er veel invoervelden zijn. Het toevoegen van validatie en afhandeling van foutmeldingen is een andere uitdaging.
Formik wil deze problemen verminderen. Het maakt het gemakkelijk om de formulierstatus te verwerken, formuliergegevens te valideren en in te dienen.
Voeg Formik toe om te reageren
Voordat u formik gebruikt, voegt u het aan uw project toe met npm.
npm install formik
Om Formik te integreren, gebruik je de useFormik hook. Importeer in Register.js useFormik bovenaan het bestand:
import { useFormik } from "formik"
De eerste stap is het initialiseren van de formulierwaarden. In dit geval initialiseert u het e-mailadres en het wachtwoord.
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
onSubmit: values => {
// handle form submission
},
});
U voegt ook de functie onSubmit toe, die de formulierwaarden ontvangt en de formulierinzending afhandelt. Voor een registratieformulier als dit kan dit betekenen dat er een nieuwe gebruiker in de database wordt aangemaakt.
De volgende stap is het gebruik van het formik object om de formulierwaarden in en uit de status te halen.
<form className="register-form" onSubmit={formik.handleSubmit}>
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<input type="submit" value="Submit" />
</form>
In de bovenstaande code ben je:
- Geef de invoervelden een id en name waarde die gelijk is aan de waarde die gebruikt werd tijdens de initialisatie in de useFormik hook.
- Toegang krijgen tot de waarde van een veld, waarbij de naam wordt gebruikt om deze op te halen uit formik.values.
- Binden van formik.handleChange aan de onChange-gebeurtenis om de invoerwaarden weer te geven terwijl de gebruiker typt.
- formik.handleBlur gebruiken om bezochte velden bij te houden.
- formik.handleSubmit binden aan de onSubmit gebeurtenis om de onSubmit functie te activeren die u heeft toegevoegd aan de useFormik haak.
Formuliervalidatie inschakelen
Bij het maken van een formulier is het belangrijk om de gebruikersinvoer te valideren, omdat dit de gebruikersauthenticatie eenvoudig maakt, omdat u alleen gegevens in het juiste formaat opslaat. In uw formulier kunt u bijvoorbeeld controleren of de opgegeven e-mail geldig is en of het wachtwoord meer dan 8 tekens bevat.
Om het formulier te valideren, definieert u een validatiefunctie die de formulierwaarden accepteert en een foutobject retourneert.
Als u de validatiefunctie toevoegt aan useFormik, zal elke gevonden validatiefout beschikbaar zijn in Formik.errors, geïndexeerd op de invoernaam. U kunt bijvoorbeeld toegang krijgen tot een fout over het e-mailveld met behulp van Formik.errors.email.
Maak in Register.js de functie validate en neem deze op in useFormik.
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
validate: () => {
const errors = {};
console.log(errors)
if (!formik.values.email) {
errors.email = "Required";
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(formik.values.email)
) {
errors.email = "Invalid email address";
}
if (!formik.values.password) {
errors.password = "Required";
} else if (formik.values.password.length < 8) {
errors.password = "Must be 8 characters or more";
}
return errors;
},
onSubmit: (values) => {
console.log("submitted!");
// handle submission
},
});
Foutafhandeling toevoegen
Geef vervolgens de foutmeldingen weer als deze bestaan. Gebruik Formik.touched om te controleren of het veld bezocht is. Dit voorkomt dat er een fout wordt weergegeven voor een veld dat de gebruiker nog niet heeft bezocht.
<form className="register-form">
<input
id="email"
name="email"
type="email"
placeholder="Your Email"
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div> : null}
<input
id="password"
name="password"
type="password"
placeholder="Your password"
value={formik.values.password}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.password && formik.errors.password ? <div>{formik.errors.password}</div> : null}
<input type="submit" value="Submit" />
</form>
Valideer gegevens met Yup
Formik biedt een eenvoudigere manier om formulieren te valideren met behulp van de Yup-bibliotheek. Installeer yup om aan de slag te gaan.
npm install yup
Importeer yup in Register.js.
import * as Yup from "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 = useFormik({
initialValues: {
email: "",
password: "",
},
validationSchema: Yup.object().shape({
email: Yup.string()
.email("Invalid email address")
.required("Required"),
password: Yup.string()
.min(8, "Must be 8 characters or more")
.required("Required")
}),
onSubmit: (values) => {
console.log("submitted!");
// handle submission
},
});
En dat is het! Je hebt een eenvoudig registratieformulier gemaakt met Formik en Yup.
Alles inpakken
Formulieren vormen een integraal onderdeel van elke applicatie, 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.