React useFormState: Kattava opas lomaketilan hallintaan

Lomakkeet ovat olennainen osa lähes jokaista web-sovellusta. Ne mahdollistavat käyttäjien vuorovaikutuksen sovelluksen kanssa, tietojen lähettämisen ja erilaisten toimintojen suorittamisen. Lomaketilan tehokas hallinta on ratkaisevan tärkeää kestävien ja käyttäjäystävällisten lomakkeiden rakentamiseksi. Reactin useFormState-hook tarjoaa tehokkaan ja elegantin ratkaisun lomaketilan hallinnan yksinkertaistamiseen.

Mikä on useFormState?

useFormState on React-hook, joka yksinkertaistaa lomaketilan hallintaa tarjoamalla keskitetyn paikan lomakkeen arvojen tallentamiseen ja päivittämiseen, syötteen muutosten seuraamiseen, validoinnin käsittelyyn ja lähetystilan hallintaan. Se virtaviivaistaa monimutkaisten lomakkeiden rakentamista vähentämällä toistuvaa koodia ja parantamalla koodin luettavuutta.

Verrattuna perinteisiin lähestymistapoihin, joissa käytetään useState-tilaa jokaiselle lomakekentälle, useFormState tarjoaa useita etuja:

• Keskitetty tila: Hallitsee kaikkia lomaketietoja yhdessä tilan objektissa, mikä parantaa organisaatiota ja vähentää monimutkaisuutta.
• Yksinkertaistetut päivitykset: Tarjoaa kätevän tavan päivittää useita lomakekenttiä samanaikaisesti.
• Sisäänrakennettu validointi: Tarjoaa sisäänrakennetun tuen lomakkeen validoinnille, jonka avulla voit helposti validoida lomaketietoja ja näyttää virheilmoituksia.
• Lähetyksen käsittely: Tarjoaa mekanismeja lomakkeen lähetystilan hallintaan, kuten sen seuraamiseen, onko lomake parhaillaan lähettämässä vai onko se jo lähetetty.
• Parannettu luettavuus: Yksinkertaistaa lomakkeen logiikkaa, mikä helpottaa sen ymmärtämistä ja ylläpitoa.

Peruskäyttö

Aloitetaan perusesimerkillä siitä, miten useFormState-hookia käytetään yksinkertaisessa lomakkeessa, jossa on kaksi syöttökenttää: nimi ja sähköposti.

Asennus

Ensinnäkin sinun on asennettava useFormState-hook. Asennustapa riippuu käyttämästäsi kirjastosta tai frameworkista, joka tarjoaa hookin (esim. React Hook Form, Formik mukautetulla hookilla tai vastaava ratkaisu). Tässä esimerkissä käytetään hypoteettista kirjastoa nimeltä react-form-state (korvaa todellisella kirjastollasi):

            npm install react-form-state

            

              
                Copy
              
            
          

Esimerkkikoodi

            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) => {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      alert(JSON.stringify(values));
    },
    validate: (values) => {
      const errors = {};
      if (!values.name) {
        errors.name = 'Name is required';
      }
      if (!values.email) {
        errors.email = 'Email is required';
      } else if (!/^\w[-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(values.email)) {
        errors.email = 'Invalid email format';
      }
      return errors;
    },
  });

  return (
    

      

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

        Email:
        
        {touched.email && errors.email && {errors.email}}
      
      
        {isSubmitting ? 'Submitting...' : 'Submit'}
      
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

Selitys

• Tuo useFormState: Tuomme useFormState-hookin react-form-state-kirjastosta.
• Alusta Hook: Kutsumme useFormState-hookia options-objektin kanssa. Tämä objekti sisältää:
• initialValues: Objekti, joka määrittelee lomakekenttien alkuarvot.
• onSubmit: Funktio, jota kutsutaan, kun lomake lähetetään. Se saa lomakkeen arvot argumenttina. Tässä esimerkissä simuloimme API-kutsua setTimeout-funktion avulla.
• validate: Funktio, joka validoi lomakkeen arvot. Sen tulisi palauttaa objekti, jossa avaimet ovat kenttien nimet ja arvot ovat virheilmoitukset. Jos kenttä on kelvollinen, sitä ei pitäisi sisällyttää palautettuun objektiin.
• Hajota Arvot: Hajotamme useFormState-hookin paluuarvon saadaksemme seuraavat arvot:
• values: Objekti, joka sisältää lomakekenttien nykyiset arvot.
• errors: Objekti, joka sisältää validointivirheet.
• touched: Objekti, joka osoittaa, mitkä kentät on kosketettu (eli ovat olleet kohdistettuina ja sitten menettäneet kohdistuksensa).
• handleChange: Funktio, joka päivittää lomakkeen arvot, kun syöttökentät muuttuvat.
• handleSubmit: Funktio, joka käsittelee lomakkeen lähetyksen.
• isSubmitting: Boolean-arvo, joka osoittaa, onko lomake parhaillaan lähettämässä.
• Lomakkeen Renderöinti: Renderöimme lomakkeen syöttökenttien kanssa. Jokainen syöttökenttä on yhdistetty values-objektiin ja handleChange-funktioon.
• Virheen Näyttö: Näytämme virheilmoitukset jokaiselle kentälle, jos kenttää on kosketettu ja siinä on virhe.
• Lähetyspainike: Lähetyspainike on poistettu käytöstä, kun lomake on lähettämässä.

Lisäominaisuudet

useFormState tarjoaa valikoiman lisäominaisuuksia monimutkaisempien lomakeskenaarioiden käsittelyyn.

Mukautettu Validointi

validate-funktion avulla voit toteuttaa mukautettua validointilogiikkaa. Voit suorittaa monimutkaisia validointitarkistuksia, kuten validointia tietokantaa vasten tai käyttämällä säännöllisiä lausekkeita. Esimerkiksi puhelinnumeron validointi maatunnuksen perusteella:

            const validate = (values) => {
  const errors = {};
  if (!values.phoneNumber) {
    errors.phoneNumber = 'Phone number is required';
  } else {
    // Example: Validate US phone number format
    if (values.countryCode === 'US' && !/^\d{3}-\d{3}-\d{4}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid US phone number format (e.g., 123-456-7890)';
    }
    // Example: Validate UK phone number format
    if (values.countryCode === 'UK' && !/^\d{5} \d{6}$/.test(values.phoneNumber)) {
      errors.phoneNumber = 'Invalid UK phone number format (e.g., 01632 960001)';
    }
    // More country-specific validation can be added here
  }
  return errors;
};

            

              
                Copy
              
            
          

Asynkroninen Validointi

Validointiin, joka vaatii asynkronisia operaatioita (esim. tarkistaminen, onko käyttäjätunnus käytettävissä), voit käyttää asynkronista validate-funktiota.

            const validate = async (values) => {
  const errors = {};
  // Simulate an API call to check username availability
  const isUsernameAvailable = await checkUsernameAvailability(values.username);
  if (!isUsernameAvailable) {
    errors.username = 'Username is already taken';
  }
  return errors;
};

async function checkUsernameAvailability(username) {
  // Replace with your actual API call
  await new Promise((resolve) => setTimeout(resolve, 500));
  // Simulate username taken
  return username !== 'taken_username';
}

            

              
                Copy
              
            
          

Dynaamiset Lomakkeet

useFormState-hookia voidaan käyttää dynaamisten lomakkeiden rakentamiseen, joissa lomakekenttiä lisätään tai poistetaan käyttäjän toiminnan perusteella. Tämä on erityisen hyödyllistä lomakkeissa, joissa on vaihteleva määrä syöttökenttiä.

            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}:
          
        
      ))}
      
        Add Item
      
      Submit
    
  );
}

export default DynamicForm;

            

              
                Copy
              
            
          

Taulukkokenttien Käsittely

Kun lomakkeesi sisältää taulukkokenttiä (esim. luettelo harrastuksista tai taidoista), useFormState-hookia voidaan mukauttaa hallitsemaan näitä taulukkoarvoja tehokkaasti. Tässä on esimerkki:

            import React from 'react';
import { useFormState } from 'react-form-state';

function SkillsForm() {
  const { values, handleChange, handleSubmit } = useFormState({
    initialValues: {
      skills: [''], // Start with one empty skill
    },
    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 (
    

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

           updateSkill(index, e.target.value)}
          />
        
      ))}
      
        Add Skill
      
      Submit
    
  );
}

export default SkillsForm;

            

              
                Copy
              
            
          

Saavutettavuusnäkökohdat

Lomakkeita rakennettaessa on tärkeää ottaa huomioon saavutettavuus, jotta varmistetaan, että vammaiset käyttäjät voivat käyttää lomaketta tehokkaasti. Tässä on joitain saavutettavuusvinkkejä:

• Käytä semanttista HTML:ää: Käytä sopivia HTML-elementtejä, kuten <label>, <input>, <textarea> ja <button>.
• Tarjoa selitteet kaikille lomakekentille: Käytä <label>-elementtiä liittääksesi selitteet lomakekenttiin. Varmista, että selitteen for-attribuutti vastaa syöttökentän id-attribuuttia.
• Käytä ARIA-attribuutteja: Käytä ARIA-attribuutteja tarjotaksesi lisätietoja lomakekentistä avustaville teknologioille. Käytä esimerkiksi aria-describedby-attribuuttia liittääksesi virheilmoitukset lomakekenttiin.
• Tarjoa selkeitä ja ytimekkäitä virheilmoituksia: Virheilmoitusten tulisi olla helppoja ymmärtää ja niiden tulisi tarjota ohjeita virheiden korjaamiseen.
• Varmista riittävä värikontrasti: Käytä riittävää värikontrastia tekstin ja taustavärien välillä, jotta lomake on luettavissa näkövammaisille käyttäjille.
• Testaa avustavilla teknologioilla: Testaa lomake avustavilla teknologioilla, kuten ruudunlukijoilla, varmistaaksesi, että se on vammaisten käyttäjien käytettävissä.

Parhaat Käytännöt

• Pidä validate-funktio puhtaana: validate-funktion tulisi olla puhdas funktio, mikä tarkoittaa, että sillä ei saisi olla sivuvaikutuksia ja sen tulisi aina palauttaa sama tulos samalle syötteelle.
• Käytä muistamista: Käytä muistamista optimoidaksesi lomakkeen suorituskykyä. Muistaminen voi auttaa estämään lomakekomponenttien tarpeettoman uudelleenrenderöinnin.
• Käytä johdonmukaista nimeämiskäytäntöä: Käytä johdonmukaista nimeämiskäytäntöä lomakekentille ja validointivirheille. Tämä helpottaa koodin lukemista ja ylläpitoa.
• Kirjoita yksikkötestit: Kirjoita yksikkötestit varmistaaksesi, että lomake toimii oikein. Yksikkötestit voivat auttaa havaitsemaan virheet varhaisessa kehitysvaiheessa.
• Harkitse kansainvälistämistä (i18n): Globaaleissa sovelluksissa varmista, että lomakkeen selitteet, viestit ja validointisäännöt tukevat useita kieliä. Kirjastot, kuten react-intl tai i18next, voivat auttaa tässä.

Kansainvälisiä Esimerkkejä

Kansainvälisesti toimittaessa on tärkeää ottaa huomioon kansainvälistäminen ja lokalisointi. Tässä on joitain esimerkkejä siitä, miten käsitellä erilaisia kansainvälisiä lomakevaatimuksia:

• Puhelinnumerot: Eri mailla on erilaiset puhelinnumeromuodot. Käytä kirjastoa, kuten libphonenumber-js, validoidaksesi puhelinnumerot maatunnuksen perusteella.
• Postinumerot: Postinumerot vaihtelevat huomattavasti eri maiden välillä. Jotkut maat käyttävät numeerisia postinumeroita, kun taas toiset käyttävät aakkosnumeerisia koodeja. Toteuta validointilogiikka, joka tukee erilaisia postinumeroformaatteja.
• Päivämäärämuodot: Päivämäärämuodot vaihtelevat kulttuurien välillä. Jotkut maat käyttävät MM/PP/VVVV-muotoa, kun taas toiset käyttävät PP/MM/VVVV-muotoa. Käytä kirjastoa, kuten moment.js tai date-fns, muotoillaksesi ja jäsentääksesi päivämääriä käyttäjän alueasetusten perusteella.
• Osoitemuodot: Osoitemuodot vaihtelevat myös eri maiden välillä. Jotkut maat edellyttävät katuosoitteen olevan ensimmäisellä rivillä, kun taas toiset edellyttävät kaupungin ja postinumeron olevan ensimmäisellä rivillä. Käytä kirjastoa tai API:a muotoillaksesi osoitteita käyttäjän maan perusteella.
• Valuuttamuodot: Näytä valuutta-arvot käyttäjän alueasetusten mukaiseen muotoon. Käytä Intl.NumberFormat-API:a valuutta-arvojen muotoiluun.

Harkitse esimerkiksi rekisteröintilomaketta, jonka on kerättävä puhelinnumero. Yhden "puhelinnumero"-kentän sijasta voi olla hyödyllistä, että erilliset kentät "maatunnus" ja "puhelinnumero" yhdistetään validointikirjaston kanssa, jotta voidaan mukautua tiettyyn paikalliseen muotoon.

Vaihtoehtoja useFormState-hookille

Vaikka useFormState tarjoaa kätevän ratkaisun lomaketilan hallintaan, on olemassa muita suosittuja kirjastoja ja lähestymistapoja, joita voit harkita:

• Formik: Laajalti käytetty kirjasto, joka tarjoaa kattavia lomakehallintaominaisuuksia, mukaan lukien tilanhallinta, validointi ja lähetyksen käsittely.
• React Hook Form: Suorituskykyinen kirjasto, joka hyödyntää Reactin useRef-hookia minimoidakseen uudelleenrenderöinnit ja parantaakseen lomakkeen suorituskykyä.
• Redux Form: Kirjasto, joka integroituu Reduxiin lomaketilan hallitsemiseksi. Tämä on hyvä vaihtoehto, jos käytät jo Reduxia sovelluksessasi.
• Mukautetut Hookit: Voit luoda omia mukautettuja hookeja lomaketilan hallitsemiseksi. Tämä antaa sinulle eniten joustavuutta, mutta vaatii enemmän vaivaa.

Johtopäätös

Reactin useFormState-hook tarjoaa tehokkaan ja elegantin ratkaisun lomaketilan hallinnan yksinkertaistamiseen. Keskittämällä tilan, yksinkertaistamalla päivityksiä, tarjoamalla sisäänrakennetun validoinnin ja hallitsemalla lähetyksen tilaa, useFormState voi parantaa merkittävästi React-lomakkeiden kehityskokemusta ja koodin laatua.

Riippumatta siitä, rakennatko yksinkertaisia vai monimutkaisia lomakkeita dynaamisten kenttien ja kansainvälistämisvaatimusten kanssa, useFormState voi auttaa sinua rakentamaan kestäviä, saavutettavia ja käyttäjäystävällisiä lomakkeita helposti. Harkitse projektisi erityisvaatimuksia ja valitse lähestymistapa, joka sopii parhaiten tarpeisiisi. Muista priorisoida saavutettavuus ja kansainvälistäminen varmistaaksesi, että lomakkeesi ovat kaikkien käytettävissä heidän kyvyistään tai sijainnistaan riippumatta.