Avastage Reacti useFormState hook'i võimsus sujuvaks vormide oleku haldamiseks. Õppige, kuidas hõlpsasti luua robustseid ja kasutajasõbralikke vorme.
React useFormState: Põhjalik juhend vormide oleku haldamiseks
Vormid on peaaegu iga veebirakenduse fundamentaalne osa. Need võimaldavad kasutajatel rakendusega suhelda, andmeid esitada ja erinevaid toiminguid sooritada. Vormi oleku tõhus haldamine on robustsete ja kasutajasõbralike vormide loomisel ülioluline. Reacti useFormState hook pakub võimsat ja elegantset lahendust vormi oleku haldamise lihtsustamiseks.
Mis on useFormState?
useFormState on Reacti hook, mis lihtsustab vormi oleku haldamist, pakkudes keskset kohta vormi väärtuste salvestamiseks ja uuendamiseks, sisendimuudatuste jälgimiseks, valideerimise käsitlemiseks ja esitamise oleku haldamiseks. See muudab keeruliste vormide loomise protsessi sujuvamaks, vähendades korduvat koodi ja parandades koodi loetavust.
Võrreldes traditsiooniliste lähenemistega, kus iga vormivälja jaoks kasutatakse useState'i, pakub useFormState mitmeid eeliseid:
- Tsentraliseeritud olek: Haldab kõiki vormi andmeid ühes olekuobjektis, parandades organiseeritust ja vähendades keerukust.
- Lihtsustatud uuendused: Pakub mugavat viisi mitme vormivälja samaaegseks uuendamiseks.
- Sisse-ehitatud valideerimine: Pakub sisse-ehitatud tuge vormi valideerimiseks, võimaldades teil lihtsalt vormi andmeid valideerida ja veateateid kuvada.
- Esitamise käsitlemine: Pakub mehhanisme vormi esitamise oleku haldamiseks, näiteks jälgides, kas vormi hetkel esitatakse või on see juba esitatud.
- Parem loetavus: Lihtsustab vormi loogikat, muutes selle mõistmise ja hooldamise lihtsamaks.
Põhikasutus
Alustame põhinäitega, kuidas kasutada useFormState'i lihtsas vormis, millel on kaks sisendvälja: nimi ja e-post.
Paigaldamine
Esmalt peate paigaldama useFormState hook'i. Paigaldusmeetod sõltub teegist või raamistikust, mida kasutate ja mis hook'i pakub (nt React Hook Form, Formik koos kohandatud hook'iga või sarnane lahendus). See näide kasutab hüpoteetilist teeki nimega react-form-state (asendage see oma tegeliku teegiga):
npm install react-form-state
Näidiskood
import React from 'react';
import { useFormState } from 'react-form-state';
function MyForm() {
const { values, errors, touched, handleChange, handleSubmit, isSubmitting } = useFormState({
initialValues: {
name: '',
email: '',
},
onSubmit: async (values) => {
// Simuleeri API-kutset
await new Promise((resolve) => setTimeout(resolve, 1000));
alert(JSON.stringify(values));
},
validate: (values) => {
const errors = {};
if (!values.name) {
errors.name = 'Nimi on kohustuslik';
}
if (!values.email) {
errors.email = 'E-post on kohustuslik';
} else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(values.email)) {
errors.email = 'Vigane e-posti formaat';
}
return errors;
},
});
return (
);
}
export default MyForm;
Selgitus
- Impordi
useFormState: ImpordimeuseFormStatehook'ireact-form-stateteegist. - Initsialiseeri hook: Kutsume välja
useFormState'i valikute objektiga. See objekt sisaldab: initialValues: Objekt, mis määratleb vormiväljade algväärtused.onSubmit: Funktsioon, mis kutsutakse välja vormi esitamisel. See saab argumendina vormi väärtused. Selles näites simuleerime API-kutsetsetTimeout'iga.validate: Funktsioon, mis valideerib vormi väärtusi. See peaks tagastama objekti, kus võtmeteks on väljade nimed ja väärtusteks veateated. Kui väli on kehtiv, ei tohiks seda tagastatavasse objekti lisada.- Väärtuste eraldamine: Eraldame
useFormStatetagastatud väärtusest järgmised väärtused: values: Objekt, mis sisaldab vormiväljade hetkeväärtusi.errors: Objekt, mis sisaldab valideerimisvigu.touched: Objekt, mis näitab, milliseid välju on puudutatud (st on fokuseeritud ja seejärel fookusest eemaldatud).handleChange: Funktsioon, mis uuendab vormi väärtusi, kui sisendväljad muutuvad.handleSubmit: Funktsioon, mis käsitleb vormi esitamist.isSubmitting: Boole'i väärtus, mis näitab, kas vormi hetkel esitatakse.- Vormi renderdamine: Renderdame vormi koos sisendväljadega. Iga sisendväli on ühendatud
valuesobjekti jahandleChangefunktsiooniga. - Vigade kuvamine: Kuvame iga välja kohta veateateid, kui väli on puudutatud ja esineb viga.
- Esitamisnupp: Esitamisnupp on vormi esitamise ajal deaktiveeritud.
Täpsemad funktsioonid
useFormState pakub mitmesuguseid täpsemaid funktsioone keerukamate vormistsenaariumide käsitlemiseks.
Kohandatud valideerimine
validate funktsioon võimaldab teil rakendada kohandatud valideerimisloogikat. Saate teha keerulisi valideerimiskontrolle, näiteks valideerida andmebaasi vastu või kasutada regulaaravaldisi. Näiteks telefoninumbri valideerimine riigikoodi alusel:
const validate = (values) => {
const errors = {};
if (!values.phoneNumber) {
errors.phoneNumber = 'Telefoninumber on kohustuslik';
} else {
// Näide: USA telefoninumbri vormingu valideerimine
if (values.countryCode === 'US' && !/^\d{3}-\d{3}-\d{4}$/.test(values.phoneNumber)) {
errors.phoneNumber = 'Vigane USA telefoninumbri vorming (nt 123-456-7890)';
}
// Näide: Ühendkuningriigi telefoninumbri vormingu valideerimine
if (values.countryCode === 'UK' && !/^\d{5} \d{6}$/.test(values.phoneNumber)) {
errors.phoneNumber = 'Vigane ĂśK telefoninumbri vorming (nt 01632 960001)';
}
// Siia saab lisada rohkem riigipõhist valideerimist
}
return errors;
};
AsĂĽnkroonne valideerimine
Valideerimiseks, mis nõuab asünkroonseid operatsioone (nt kontrollimine, kas kasutajanimi on saadaval), saate kasutada asünkroonset validate funktsiooni.
const validate = async (values) => {
const errors = {};
// Simuleeri API-kutset kasutajanime saadavuse kontrollimiseks
const isUsernameAvailable = await checkUsernameAvailability(values.username);
if (!isUsernameAvailable) {
errors.username = 'Kasutajanimi on juba võetud';
}
return errors;
};
async function checkUsernameAvailability(username) {
// Asendage oma tegeliku API-kutsega
await new Promise((resolve) => setTimeout(resolve, 500));
// Simuleeri, et kasutajanimi on võetud
return username !== 'taken_username';
}
DĂĽnaamilised vormid
useFormState'i saab kasutada dünaamiliste vormide loomiseks, kus vormivälju lisatakse või eemaldatakse vastavalt kasutaja interaktsioonile. See on eriti kasulik vormide puhul, millel on muutuv arv sisendvälju.
import React, { useState } from 'react';
import { useFormState } from 'react-form-state';
function DynamicForm() {
const [items, setItems] = useState(['item1']);
const { values, handleChange, handleSubmit } = useFormState({
initialValues: items.reduce((acc, item) => {
acc[item] = '';
return acc;
}, {}),
onSubmit: (values) => {
alert(JSON.stringify(values));
},
});
const addItem = () => {
const newItem = `item${items.length + 1}`;
setItems([...items, newItem]);
};
return (
);
}
export default DynamicForm;
Massiiviväljade käsitlemine
Kui teie vorm sisaldab massiivivälju (nt hobide või oskuste loend), saab useFormState'i kohandada nende massiiviväärtuste tõhusaks haldamiseks. Siin on näide:
import React from 'react';
import { useFormState } from 'react-form-state';
function SkillsForm() {
const { values, handleChange, handleSubmit } = useFormState({
initialValues: {
skills: [''], // Alusta ĂĽhe tĂĽhja oskusega
},
onSubmit: (values) => {
alert(JSON.stringify(values));
},
});
const addSkill = () => {
handleChange({ target: { name: 'skills', value: [...values.skills, ''] } });
};
const updateSkill = (index, value) => {
const newSkills = [...values.skills];
newSkills[index] = value;
handleChange({ target: { name: 'skills', value: newSkills } });
};
return (
);
}
export default SkillsForm;
Ligipääsetavuse kaalutlused
Vormide loomisel on ülioluline arvestada ligipääsetavusega, et tagada puuetega kasutajate vormi tõhus kasutamine. Siin on mõned ligipääsetavuse näpunäited:
- Kasutage semantilist HTML-i: Kasutage sobivaid HTML-elemente nagu
<label>,<input>,<textarea>ja<button>. - Lisage silt (label) kõigile vormiväljadele: Kasutage
<label>elementi siltide seostamiseks vormiväljadega. Veenduge, et sildiforatribuut vastaks sisendväljaidatribuudile. - Kasutage ARIA atribuute: Kasutage ARIA atribuute, et pakkuda abitehnoloogiatele lisateavet vormiväljade kohta. Näiteks kasutage
aria-describedby'd, et seostada veateateid vormiväljadega. - Pakkuge selgeid ja lühikesi veateateid: Veateated peaksid olema kergesti mõistetavad ja andma juhiseid vigade parandamiseks.
- Tagage piisav värvikontrastsus: Kasutage teksti ja taustavärvide vahel piisavat kontrasti, et muuta vorm nägemispuudega kasutajatele loetavaks.
- Testige abitehnoloogiatega: Testige vormi abitehnoloogiatega, näiteks ekraanilugejatega, et tagada selle ligipääsetavus puuetega kasutajatele.
Parimad praktikad
Siin on mõned parimad praktikad useFormState'i kasutamiseks:
- Hoidke
validatefunktsioon puhtana:validatefunktsioon peaks olema puhas funktsioon, mis tähendab, et sellel ei tohiks olla kõrvalmõjusid ja see peaks sama sisendi puhul alati tagastama sama väljundi. - Kasutage memoiseerimist: Kasutage memoiseerimist vormi jõudluse optimeerimiseks. Memoiseerimine aitab vältida vormi komponentide tarbetuid uuesti renderdamisi.
- Kasutage järjepidevat nimekonventsiooni: Kasutage vormiväljade ja valideerimisvigade jaoks järjepidevat nimekonventsiooni. See muudab koodi lugemise ja hooldamise lihtsamaks.
- Kirjutage ĂĽhikteste: Kirjutage ĂĽhikteste, et tagada vormi korrektne toimimine. Ăśhiktestid aitavad vigu arendusprotsessi varajases etapis tabada.
- Kaaluge rahvusvahelistumist (i18n): Globaalsete rakenduste puhul veenduge, et teie vormi sildid, teated ja valideerimisreeglid toetaksid mitut keelt. Teegid nagu
react-intlvõii18nextvõivad selles abiks olla.
Rahvusvahelised näited
Globaalses mastaabis vormidega töötamisel on oluline arvestada rahvusvahelistumise ja lokaliseerimisega. Siin on mõned näited, kuidas käsitleda erinevaid rahvusvahelisi vorminõudeid:
- Telefoninumbrid: Erinevates riikides on erinevad telefoninumbrite vormingud. Kasutage teeki nagu
libphonenumber-js, et valideerida telefoninumbreid riigikoodi alusel. - Postiindeksid: Postiindeksid varieeruvad riigiti märkimisväärselt. Mõned riigid kasutavad numbrilisi postiindekseid, teised aga tähtnumbrilisi koode. Rakendage valideerimisloogika, mis toetab erinevaid postiindeksi vorminguid.
- Kuupäevavormingud: Kuupäevavormingud varieeruvad kultuuriti. Mõned riigid kasutavad vormingut KK/PP/AAAA, teised aga PP/KK/AAAA. Kasutage teeki nagu
moment.jsvõidate-fns, et vormindada ja sõeluda kuupäevi vastavalt kasutaja lokaadile. - Aadressivormingud: Ka aadressivormingud varieeruvad riigiti. Mõned riigid nõuavad tänava aadressi esimesel real, teised aga linna ja postiindeksit esimesel real. Kasutage teeki või API-t, et vormindada aadresse vastavalt kasutaja riigile.
- Valuutavormingud: Kuvage valuutaväärtused kasutaja lokaadile sobivas vormingus. Kasutage
Intl.NumberFormatAPI-t valuutaväärtuste vormindamiseks.
Näiteks kaaluge registreerimisvormi, mis peab koguma telefoninumbri. Ühe "telefoninumbri" välja asemel võib olla kasulik omada eraldi välju "riigikoodi" ja "telefoninumbri" jaoks, kombineerituna valideerimisteegiga, et kohaneda spetsiifilise kohaliku vorminguga.
Alternatiivid useFormState'ile
Kuigi useFormState pakub mugavat lahendust vormi oleku haldamiseks, on ka teisi populaarseid teeke ja lähenemisviise, mida võite kaaluda:
- Formik: Laialdaselt kasutatav teek, mis pakub põhjalikke vormihaldusfunktsioone, sealhulgas oleku haldamist, valideerimist ja esitamise käsitlemist.
- React Hook Form: Jõudluskeskne teek, mis kasutab Reacti
useRefhook'i, et minimeerida uuesti renderdamisi ja parandada vormi jõudlust. - Redux Form: Teek, mis integreerub Reduxiga vormi oleku haldamiseks. See on hea valik, kui kasutate juba oma rakenduses Reduxit.
- Kohandatud hook'id: Saate luua oma kohandatud hook'e vormi oleku haldamiseks. See annab teile kõige rohkem paindlikkust, kuid nõuab rohkem pingutust.
Kokkuvõte
Reacti useFormState hook pakub võimsat ja elegantset lahendust vormi oleku haldamise lihtsustamiseks. Tsentraliseerides oleku, lihtsustades uuendusi, pakkudes sisse-ehitatud valideerimist ja hallates esitamise olekut, võib useFormState märkimisväärselt parandada arenduskogemust ja teie Reacti vormide koodikvaliteeti.
Olenemata sellest, kas loote lihtsaid vorme või keerulisi vorme dünaamiliste väljade ja rahvusvahelistumise nõuetega, aitab useFormState teil hõlpsasti luua robustseid, ligipääsetavaid ja kasutajasõbralikke vorme. Kaaluge oma projekti spetsiifilisi nõudeid ja valige lähenemisviis, mis sobib teie vajadustega kõige paremini. Pidage meeles, et prioriteediks tuleb seada ligipääsetavus ja rahvusvahelistumine, et tagada teie vormide kasutatavus kõigile, olenemata nende võimetest või asukohast.