Kā izmantot Formik, lai izveidotu veidlapas programmā React

Formik atvieglo veidlapu izveidi programmā React. Lūk, kā izmantot Formik, lai izveidotu veidlapas programmā React .

Formik & formas programmā React

Formik ir veidlapu pārvaldības bibliotēka, kas nodrošina komponentus un āķus, kas padara React veidlapu izveides procesu vienkāršāku. Šajā rakstā, izmantojot vietni Download.vn , uzzināsim , kā izveidot reģistrācijas veidlapu React, izmantojot Formik !

Kā izmantot Formik, lai izveidotu veidlapas programmā React

• Izveidojiet React lietotni
• Izveidojiet veidlapu programmā React
• Pievienojiet Formik, lai reaģētu
• Iespējot veidlapu autentifikāciju
• Pievienojiet kļūdu apstrādi
• Apstipriniet datus, izmantojot Yup

Izveidojiet React lietotni

Izmantojiet Create-React-app, lai izveidotu jaunu React projektu:

npx create-react-app formik-form

Tagad dodieties uz mapi formik-form/src un izdzēsiet visus failus, izņemot App.js . Pēc tam izveidojiet jaunu failu un nosauciet to Register.js . Šeit jūs pievienosit veidlapu. Atcerieties to importēt programmā App.js .

Izveidojiet veidlapu programmā React

Varat izveidot veidlapas programmā React ar kontrolētiem komponentiem vai nē.

• Veidlapas datus, kas ģenerēti no vadības komponenta, apstrādās React.
• Veidlapas datus, kas ģenerēti no nekontrolētiem elementiem, apstrādā DOM.

React mudina jūs izmantot kontrolētus komponentus. Tie ļauj lokāli izsekot veidlapas datiem, tāpēc jums ir pilnīga kontrole pār veidlapu.

Tālāk ir parādīts veidlapas piemērs, kas izveidota ar kontrolētu komponentu:

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 (
 

); }; export default Register;

Iepriekš minētajā kodā jūs inicializējat stāvokli un izveidojat apdarinātāja funkciju katram ievades laukam. Kamēr tas darbojas, kods var atkārtoties un kļūt netīrs, it īpaši, ja ir daudz ievades lauku. Validācijas un kļūdu ziņojumu apstrādes pievienošana ir vēl viens izaicinājums.

Formik var samazināt iepriekš minēto stāvokli. Tas padara stāvokļa apstrādi, validāciju un datu ievadi vienkāršu.

Pievienojiet Formik, lai reaģētu

Pirms formik lietošanas pievienojiet to savam projektam, izmantojot npm.

npm install formik

Lai integrētu Formik, izmantosit useFormik āķi. Vietnē Register.js faila augšdaļā ievadiet useFormik:

import { useFormik } from "formik"

Pirmais solis ir iestatīt veidlapas vērtības. Šajā gadījumā jūs inicializēsit savu e-pastu un paroli.

const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 onSubmit: values => {
// handle form submission
 },
});

Jums arī jāpievieno funkcija onSubmit, kas iegūst vērtības un apstrādā veidlapu iesniegšanu. Reģistrācijas veidlapai šī darbība izveido jaunu lietotāju datu bāzē.

Nākamais solis ir izmantot formik objektu, lai iegūtu formas vērtības stāvoklī un ārpus tās.

Iepriekš minētajā kodā jūs esat:

• Nodrošiniet ievades laukus ar id un nosaukuma vērtībām, kas ir līdzvērtīgas vērtībām, kuras tika izmantotas inicializācijas laikā, izmantojot useFormik āķi .
• Piekļūstiet lauka vērtībai, izmantojot tā nosaukumu, lai izvilktu to no formik.values ​​​​.
• Saistiet formik.handleChange ar notikumu onChange , lai parādītu ievades vērtības kā lietotāju veidus.
• Izmantojiet formik.handleBlur , lai sekotu līdzi apmeklētajiem laukiem.
• Saistīt formik.handleSubmit ar notikumu onSubmit , lai aktivizētu funkciju onSubmit, ko pievienojāt useFormik āķim .

Iespējot veidlapu autentifikāciju

Veidojot veidlapu, ievades validācija ir svarīga, jo tā nodrošina vienkāršu lietotāja autentifikāciju un datu saglabāšanu pareizajā formātā. Piemēram, varat pārbaudīt e-pasta derīgumu, parolei ir visas nepieciešamās rakstzīmes...

Lai apstiprinātu veidlapu šajā piemērā, atlasiet atbilstošo funkciju, akceptējiet veidlapas vērtības un atgrieziet kļūdas objektu.

Ja pievienosit validācijas funkciju useFormik , visas atrastās validācijas kļūdas būs Formik.errors , indeksētas ievades lauka nosaukumā. Piemēram, varat skatīt kļūdas par e-pasta laukiem, izmantojot Formik.errors.email .

Vietnē Register.js izveidojiet validācijas funkciju un iekļaujiet to 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
 },
});

Pievienojiet kļūdu apstrādi

Pēc tam parādiet kļūdu ziņojumus, ja tādi ir. Izmantojiet Formik.touched, lai pārbaudītu, vai šis lauks ir vai nav apmeklēts. Tas ļauj izvairīties no kļūdas parādīšanas laukā, kuram lietotājs vēl nav piekļuvis.

{formik.touched.email && formik.errors.email ?

{formik.errors.email}

: null} {formik.touched.password && formik.errors.password ?

{formik.errors.password}

: null}

Apstipriniet datus, izmantojot Yup

Formik nodrošina vienkāršāku veidu, kā apstiprināt veidlapas, izmantojot Yup bibliotēku. Lai sāktu, instalējiet Yup:

npm install yup

Reģistr.js ievadiet yup .

import * as Yup from "yup"

Tā vietā, lai rakstītu savu autentifikācijas funkciju, izmantojot Yup, lai pārbaudītu e-pasta ziņojumu un paroļu derīgumu, tas būs ātrāks.

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
 },
});

Tas ir pabeigts! Jūs esat izveidojis vienkāršu reģistrācijas veidlapu, izmantojot Formik un Yup .

Iepriekš ir vienkāršākais veids, kā izmantot Formik, lai izveidotu veidlapas programmā React . Ceru, ka šis raksts jums ir noderīgs!