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

            

              
                Copy
              
            
          

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 (
    

      

        Nimi:
        
        {touched.name && errors.name && {errors.name}}
      
      

        E-post:
        
        {touched.email && errors.email && {errors.email}}
      
      
        {isSubmitting ? 'Esitan...' : 'Esita'}
      
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

Selgitus

• Impordi useFormState: Impordime useFormState hook'i react-form-state teegist.
• 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-kutset setTimeout'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 useFormState tagastatud 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 values objekti ja handleChange funktsiooniga.
• 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;
};

            

              
                Copy
              
            
          

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';
}

            

              
                Copy
              
            
          

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 (
    

      {items.map((item) => (
        

          {item}:
          
        
      ))}
      
        Lisa element
      
      Esita
    
  );
}

export default DynamicForm;

            

              
                Copy
              
            
          

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 (
    

      Oskused:
      {values.skills.map((skill, index) => (
        

           updateSkill(index, e.target.value)}
          />
        
      ))}
      
        Lisa oskus
      
      Esita
    
  );
}

export default SkillsForm;

            

              
                Copy
              
            
          

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 sildi for atribuut vastaks sisendvälja id atribuudile.
• 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 validate funktsioon puhtana: validate funktsioon 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-intl või i18next võ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.js või date-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.NumberFormat API-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 useRef hook'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.