În acest articol, vom explora react-hook-form bibliotecă.
Veți învăța cum să utilizați și să integrați această bibliotecă cu React. Vom vedea, de asemenea, de ce devine o alegere populară pentru construirea de forme simple și complexe, cu suport suplimentar pentru gestionarea validărilor complexe.
Conţinut
Să începem
Lucrul cu formulare în React este o sarcină complexă. Și devine mai complex atunci când numărul câmpurilor de intrare crește odată cu validările.
Aruncați o privire la codul de mai jos:
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [state, setState] = useState({
email: "",
password: ""
});
const handleInputChange = (event) => {
setState((prevProps) => ({
...prevProps,
[event.target.name]: event.target.value
}));
};
const handleSubmit = (event) => {
event.preventDefault();
console.log(state);
};
return (
<div className="App">
<form onSubmit={handleSubmit}>
<div className="form-control">
<label>Email</label>
<input
type="text"
name="email"
value={state.email}
onChange={handleInputChange}
/>
</div>
<div className="form-control">
<label>Password</label>
<input
type="password"
name="password"
value={state.password}
onChange={handleInputChange}
/>
</div>
<div className="form-control">
<label></label>
<button type="submit">Login</button>
</div>
</form>
</div>
);
}Iată o demonstrație Code Sandbox: https://codesandbox.io/s/login-form-zjxs9.
În codul de mai sus, avem doar 2 câmpuri de intrare, și anume email și passwordși un buton de trimitere.
Fiecare câmp de intrare are un value și onChange a fost adăugat un handler, astfel încât să putem actualiza starea pe baza intrărilor utilizatorului.
De asemenea, am adăugat un handleSubmit metoda care afișează datele introduse în formular către consolă.
Arată bine. Dar dacă trebuie să adăugăm validări cum ar fi validarea câmpului necesar, validarea lungimii minime, validarea parolei, validarea câmpului de e-mail și afișarea mesajelor de eroare corespunzătoare?
Codul va deveni mai complex și mai lung pe măsură ce numărul câmpurilor de intrare și validările lor cresc.
Aceasta este o cerință foarte comună în orice aplicație. Deci, pentru a lucra cu ușurință cu Forms, există diverse biblioteci disponibile, cum ar fi Formik, redux-form, react-final-form, react-hook-form și așa mai departe.
Dar cel care câștigă multă popularitate este react-hook-form bibliotecă.
Deci, să învățăm acum de ce și cum să-l folosim. Pentru aceasta, vom crea o nouă aplicație React.
Creați un nou proiect React executând următoarea comandă de la terminal:
npx create-react-app react-hook-form-demoOdată ce proiectul este creat, ștergeți toate fișierele din src folder și creați un nou index.js și styles.css fișiere din interiorul fișierului src pliant.
Pentru a instala biblioteca de formulare, executați următoarea comandă de la terminal:
yarn add react-hook-formCum se creează pagini inițiale
Deschide src/index.js fișier și adăugați următorul conținut în interiorul acestuia:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));Deschide src/styles.css fișier și adăugați conținutul de la Aici inauntru.
Acum, creați un fișier nou App.js în interiorul src folder cu următorul conținut:
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<form>
<div className="form-control">
<label>Email</label>
<input type="text" name="email" />
</div>
<div className="form-control">
<label>Password</label>
<input type="password" name="password" />
</div>
<div className="form-control">
<label></label>
<button type="submit">Login</button>
</div>
</form>
</div>
);
}Aici, tocmai am adăugat câmpurile de e-mail și parolă la formular.
Crearea formularului de bază folosind formularul react-hook
react-hook-form biblioteca oferă o useForm cârlig pe care îl putem folosi pentru a lucra cu formulare.
Importați fișierul useForm cârlig așa:
import { useForm } from 'react-hook-form';Folosește useForm cârlig așa:
const { register, handleSubmit, errors } = useForm();Aici,
- registru este o funcție care trebuie utilizată ca referință furnizată de
useFormcârlig. Îl putem atribui fiecărui câmp de intrare astfel încâtreact-hook-formpoate urmări modificările pentru valoarea câmpului de intrare. - handleSubmit este funcția pe care o putem apela atunci când formularul este trimis
- erorile vor conține erorile de validare, dacă există
Acum, înlocuiți conținutul fișierului App.js fișier cu următorul conținut:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
export default function App() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-control">
<label>Email</label>
<input type="text" name="email" ref={register} />
</div>
<div className="form-control">
<label>Password</label>
<input type="password" name="password" ref={register} />
</div>
<div className="form-control">
<label></label>
<button type="submit">Login</button>
</div>
</form>
</div>
);
}În codul de mai sus, am dat o referință fiecărui câmp de intrare pe care l-am obținut de la useForm cârlig.
ref={register}De asemenea, am adăugat funcția onSubmit care este transmisă funcției handleSubmit.
<form onSubmit={handleSubmit(onSubmit)}>Rețineți că, pentru fiecare câmp de introducere, am dat un nume unic, care este obligatoriu react-hook-form poate urmări schimbarea datelor.
Când trimitem formularul, funcția handleSubmit va gestiona trimiterea formularului. Acesta va trimite datele introduse de utilizator către funcția onSubmit pe care o conectăm la consolă.
const onSubmit = (data) => {
console.log(data);
};Acum, porniți aplicația executând yarn start comanda.
După cum puteți vedea, atunci când trimitem formularul, detaliile introduse de utilizator sunt afișate în consolă.
De asemenea, în comparație cu codul fără react-hook-form (pe care l-am văzut la începutul acestui articol), acest cod este mult mai simplu. Acest lucru se datorează faptului că nu trebuie să adăugăm value și onChange pentru fiecare câmp de intrare și nu este nevoie să gestionăm singuri starea aplicației.
Cum să adăugați validări la formular
Acum, să adăugăm câmpul necesar și validarea lungimii minime la câmpurile de intrare.
Pentru a adăuga validare o putem trece la funcția de înregistrare care este transmisă ca referință la fiecare câmp de intrare astfel:
<input type="text" name="email" ref={register({ required: true})} />
<input
type="password"
name="password"
ref={register({ required: true, minLength: 6 })}
/>De asemenea, dorim să afișăm mesajul de eroare dacă validarea eșuează.
Când validarea eșuează, obiectul erorilor provine de la useForm va fi populat cu câmpurile pentru care validarea a eșuat.
Deschide App.js fișier și înlocuiți conținutul acestuia cu următorul conținut:
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";
export default function App() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-control ">
<label>Email</label>
<input
type="text"
name="email"
ref={register({
required: true,
pattern: /^[^@ ]+@[^@ ]+.[^@ .]{2,}$/
})}
/>
{errors.email && errors.email.type === "required" && (
<p className="errorMsg">Email is required.</p>
)}
{errors.email && errors.email.type === "pattern" && (
<p className="errorMsg">Email is not valid.</p>
)}
</div>
<div className="form-control">
<label>Password</label>
<input
type="password"
name="password"
ref={register({ required: true, minLength: 6 })}
/>
{errors.password && errors.password.type === "required" && (
<p className="errorMsg">Password is required.</p>
)}
{errors.password && errors.password.type === "minLength" && (
<p className="errorMsg">
Password should be at-least 6 characters.
</p>
)}
</div>
<div className="form-control">
<label></label>
<button type="submit">Login</button>
</div>
</form>
</div>
);
}
Aici, pentru câmpul de introducere a e-mailului, am furnizat validările necesare și potrivirea modelului.
<input
type="text"
name="email"
ref={register({
required: true,
pattern: /^[^@ ]+@[^@ ]+.[^@ .]{2,}$/
})}
/>Deci, pe măsură ce introduceți câmpul de introducere a e-mailului, validarea va rula odată cu trimiterea formularului.
Dacă validarea a eșuat, atunci fișierul errors.email câmpul din interiorul obiectului erori va fi completat cu câmpul de tip pe care l-am folosit pentru a afișa mesajul de eroare.
{errors.email && errors.email.type === "required" && (
<p className="errorMsg">Email is required.</p>
)}În mod similar, am adăugat validarea câmpului parolei.
Așa cum puteți vedea, fiecare câmp de intrare este focalizat automat dacă există vreo eroare de validare pentru câmpul de intrare respectiv atunci când trimitem formularul.
De asemenea, formularul nu este trimis atâta timp cât există o eroare de validare. Puteți vedea că console.log declarația este tipărită numai dacă formularul este valid.
Deci folosind react-hook-form a redus cantitatea de cod pe care trebuie să o scriem. Validarea este, de asemenea, receptivă, astfel încât odată ce câmpul devine valid, mesajul de eroare dispare instantaneu.
Dar pe măsură ce numărul de validări pentru fiecare câmp crește, verificările condiționale și codul mesajului de eroare vor crește în continuare. Deci, putem refactura în continuare codul pentru a-l simplifica și mai mult.
Aruncați o privire la codul de mai jos:
import React from 'react';
import { useForm } from 'react-hook-form';
import './styles.css';
export default function App() {
const { register, handleSubmit, errors } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<div className="App">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-control ">
<label>Email</label>
<input
type="text"
name="email"
ref={register({
required: 'Email is required.',
pattern: {
value: /^[^@ ]+@[^@ ]+.[^@ .]{2,}$/,
message: 'Email is not valid.'
}
})}
/>
{errors.email && <p className="errorMsg">{errors.email.message}</p>}
</div>
<div className="form-control">
<label>Password</label>
<input
type="password"
name="password"
ref={register({
required: 'Password is required.',
minLength: {
value: 6,
message: 'Password should be at-least 6 characters.'
}
})}
/>
{errors.password && (
<p className="errorMsg">{errors.password.message}</p>
)}
</div>
<div className="form-control">
<label></label>
<button type="submit">Login</button>
</div>
</form>
</div>
);
}În codul de mai sus, am schimbat codul de validare a e-mailului și a parolei.
Pentru câmpul de introducere a e-mailului, am schimbat acest cod anterior:
<input
type="text"
name="email"
ref={register({
required: true,
pattern: /^[^@ ]+@[^@ ]+.[^@ .]{2,}$/
})}
/>la noul cod de mai jos:
<input
type="text"
name="email"
ref={register({
required: 'Email is required.',
pattern: {
value: /^[^@ ]+@[^@ ]+.[^@ .]{2,}$/,
message: 'Email is not valid.'
}
})}
/>Aici, am furnizat direct mesajul de eroare pe care dorim să îl afișăm în timp ce adăugăm validarea însăși.
Deci, nu mai trebuie să adăugăm verificări suplimentare pentru fiecare validare. Afișăm mesajul de eroare folosind proprietatea mesaj disponibilă în interiorul obiectului de erori pentru fiecare câmp de intrare.
{errors.email && <p className="errorMsg">{errors.email.message}</p>}Deci, procedând astfel, codul este simplificat și mai mult, ceea ce face mai ușoară adăugarea de validări suplimentare în viitor.
Rețineți că, dacă există erori de validare, handler-ul onSubmit nu va fi executat și câmpul de intrare corespunzător va fi automat focalizat (ceea ce este un lucru bun).
Cum se adaugă o metodă de validare personalizată
Puteți oferi chiar o validare personalizată pentru câmpul de introducere prin adăugarea unui validate metodă. Acest lucru este util dacă trebuie să efectuați validări complexe ca aceasta:
// validation function
const validatePassword = (value) => {
if (value.length < 6) {
return 'Password should be at-least 6 characters.';
} else if (
!/(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?!.*s)(?=.*[!@#$*])/.test(value)
) {
return 'Password should contain at least one uppercase letter, lowercase letter, digit, and special symbol.';
}
return true;
};
// JSX
<input
type="password"
name="password"
ref={register({
required: 'Password is required.',
validate: validatePassword
})}
/>
Acum știi cum să folosești react-hook-form pentru a crea formulare în React împreună cu validări complexe.
De ce react-hook-form este mai bun decât alternativele
Să ne uităm la câteva motive suplimentare care react-hook-form ar trebui să devină alegerea dvs. preferată pentru lucrul cu formulare.
- Complexitatea codului este mai mică în comparație cu
formik,redux-formși alte alternative. -
react-hook-formse integrează bine cuyupbibliotecă pentru validarea schemelor, astfel încât să puteți combina propriile scheme de validare. - Numărul de redare în aplicație este mic în comparație cu alternativele.
- Timpul de montare este mai mic în comparație cu alternativele.
Pentru valorile comparative efective, citiți mai multe aici.
Concluzie
În acest articol, am văzut cum să folosim react-hook-form și de ce este alegerea preferată de mulți dezvoltatori pentru a crea atât forme simple, cât și complexe în React.
Puteți găsi codul sursă GitHub pentru această aplicație Aici.
Dacă ți-a plăcut acest articol, atunci îți vor plăcea și celelalte articole ale mele.
Abonați-vă la buletin informativ săptămânal să vă alăturați altor 1000 de abonați pentru a primi sfaturi, trucuri și articole uimitoare direct în căsuța de e-mail.
#Cum #să #construiți #formulare #în #React #biblioteca #Reahookform
Cum să construiți formulare în React cu biblioteca Rea-hook-form
