React useFormState: vormide käsitlemise meisterlikkus optimeeritud kasutajakogemuste jaoks

Vormid on veebirakenduste oluline osa, mis võimaldab kasutajatel teie rakendusega suhelda ja andmeid esitada. Vormi oleku haldamine, valideerimise käsitlemine ja tagasiside andmine võib aga muutuda keeruliseks, eriti suurtes ja dünaamilistes rakendustes. Reacti useFormState hook, mis tutvustati React 18-s, pakub võimsat ja tõhusat viisi vormi oleku haldamiseks ja vormide käsitlemise loogika lihtsustamiseks, mis viib parema jõudluse ja kasutajakogemuseni. See põhjalik juhend uurib useFormState hook'i sügavuti, hõlmates selle põhimõisteid, eeliseid, praktilisi näiteid ja edasijõudnud tehnikaid.

Mis on React useFormState?

useFormState on Reacti hook, mis lihtsustab vormi oleku haldamist, kapseldades oleku ja uuendamisloogika ühte hook'i. See on spetsiaalselt loodud töötama koos Reacti serverikomponentide ja serveri toimingutega (Server Actions), võimaldades progressiivset täiustamist ja paremat jõudlust, suunates vormitöötluse serverisse.

Põhijooned ja eelised:

Lihtsustatud olekuhaldus: Keskendab vormi oleku ja uuendamisloogika, vähendades korduvat koodi ja parandades koodi loetavust.
Serveri toimingute integreerimine: Integreerub sujuvalt Reacti serveri toimingutega, võimaldades teil käsitleda vormide esitamist ja valideerimist serveris.
Progressiivne täiustamine: Võimaldab progressiivset täiustamist, lubades vormidel toimida ka ilma JavaScriptita, pakkudes täiustatud funktsionaalsust, kui JavaScript on lubatud.
Optimeeritud jõudlus: Vähendab kliendipoolset töötlemist, käsitledes vormiloogikat serveris, mis toob kaasa kiiremad vormide esitamised ja parema rakenduse jõudluse.
Juurdepääsetavus: Hõlbustab juurdepääsetavate vormide loomist, pakkudes mehhanisme vigade käsitlemiseks ja puuetega kasutajatele tagasiside andmiseks.

useFormState hook'i mõistmine

useFormState hook võtab kaks argumenti:

Serveri toiming: Funktsioon, mis käivitatakse vormi esitamisel. See funktsioon tegeleb tavaliselt vormi valideerimise, andmetöötluse ja andmebaasi uuendustega.
Algolek: Vormi oleku algväärtus. See võib olla mis tahes JavaScripti väärtus, näiteks objekt, massiiv või primitiiv.

Hook tagastab massiivi, mis sisaldab kahte väärtust:

Vormi olek: Vormi oleku hetkeväärtus.
Vormi toiming: Funktsioon, mille annate form elemendi action atribuudile. See funktsioon käivitab serveri toimingu vormi esitamisel.

Põhinäide:

Vaatleme lihtsat näidet kontaktivormist, mis võimaldab kasutajatel esitada oma nime ja e-posti aadressi.

// Serveri toiming (näide - peab olema mujal defineeritud)
async function submitContactForm(prevState, formData) {
  // Vormiandmete valideerimine
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Palun täitke kõik väljad.' };
  }

  // Vormiandmete töötlemine (nt e-kirja saatmine)
  try {
    // E-kirja saatmise simuleerimine
    await new Promise(resolve => setTimeout(resolve, 1000)); // Asünkroonse operatsiooni simuleerimine
    return { message: 'Täname teid esitamise eest!' };
  } catch (error) {
    return { message: 'Tekkis viga. Palun proovige hiljem uuesti.' };
  }
}

// Reacti komponent
'use client'; // Oluline serveri toimingute jaoks

import { useFormState } from 'react-dom';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, { message: null });

  return (
    
      Nimi:
      



      E-post:
      



      

      {state?.message && {state.message}}
    
  );
}

export default ContactForm;

Selles näites on submitContactForm funktsioon serveri toiming. See saab argumentidena eelmise oleku ja vormi andmed. See valideerib vormi andmed ja kui need on kehtivad, töötleb andmeid ja tagastab uue oleku objekti eduteatega. Vigade korral tagastab see uue oleku objekti veateatega. useFormState hook haldab vormi olekut ja pakub formAction funktsiooni, mis antakse form elemendi action atribuudile. Vormi esitamisel käivitatakse serveris submitContactForm funktsioon ja tulemuseks olev olek uuendatakse komponendis.

useFormState'i edasijõudnud tehnikad

1. Vormi valideerimine:

Vormi valideerimine on andmete terviklikkuse tagamiseks ja hea kasutajakogemuse pakkumiseks ülioluline. useFormState abil saab vormi valideerimisloogikat käsitleda serveris. Siin on näide:

async function validateForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');

  let errors = {};

  if (!name) {
    errors.name = 'Nimi on kohustuslik.';
  }

  if (!email) {
    errors.email = 'E-post on kohustuslik.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = 'Vigane e-posti formaat.';
  }

  if (Object.keys(errors).length > 0) {
    return { errors: errors };
  }

  // Vormiandmete töötlemine (nt andmebaasi salvestamine)
  return { message: 'Vorm edukalt esitatud!', errors: null };
}

function MyForm() {
  const [state, action] = useFormState(validateForm, { message: null, errors: null });

  return (
    
      Nimi:
      

      {state?.errors?.name && {state.errors.name}}

      E-post:
      

      {state?.errors?.email && {state.errors.email}}

      
      {state?.message && {state.message}}
    
  );
}

Selles näites valideerib validateForm serveri toiming vormi andmeid ja tagastab objekti, mis sisaldab valideerimisvigu. Komponent kuvab seejärel need vead kasutajale.

2. Optimistlikud uuendused:

Optimistlikud uuendused võivad parandada kasutajakogemust, pakkudes kohest tagasisidet, isegi enne kui server on vormi esitamise töödelnud. useFormState ja natukese kliendipoolse loogikaga saate rakendada optimistlikke uuendusi, uuendades vormi olekut kohe pärast vormi esitamist ja seejärel tühistades uuenduse, kui server tagastab vea.

'use client'

import { useFormState } from 'react-dom';
import { useState } from 'react';

async function submitForm(prevState, formData) {
  await new Promise(resolve => setTimeout(resolve, 1000)); // Võrgu latentsuse simuleerimine

  const value = formData.get('value');
  if (value === 'error') {
    return { message: 'Esitamine ebaõnnestus!' };
  }
  return { message: 'Esitamine õnnestus!' };
}

function OptimisticForm() {
  const [optimisticValue, setOptimisticValue] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [state, action] = useFormState(submitForm, { message: '' });

  const handleSubmit = async (e) => {
    setIsSubmitting(true);
    setOptimisticValue(e.target.value.value);
    const formData = new FormData(e.target);
    const result = await action(prevState, formData);
    setIsSubmitting(false);

    if (result?.message === 'Esitamine ebaõnnestus!') {
      setOptimisticValue(''); // Tühista vea korral
    }
  };

  return (
    
      Väärtus:
      


      
      {state?.message && {state.message}}
    
  );
}

Selles näites simuleerime viivitusega serveri vastust. Enne serveri toimingu lõpuleviimist uuendatakse sisendvälja optimistlikult esitatud väärtusega. Kui serveri toiming ebaõnnestub (simuleeritud väärtuse 'error' esitamisega), taastatakse sisendvälja eelmine olek.

3. Failide üleslaadimise käsitlemine:

useFormState saab kasutada ka failide üleslaadimise käsitlemiseks. FormData objekt käsitleb failiandmeid automaatselt. Siin on näide:

async function uploadFile(prevState, formData) {
  const file = formData.get('file');

  if (!file) {
    return { message: 'Palun valige fail.' };
  }

  // Faili üleslaadimise simuleerimine
  await new Promise(resolve => setTimeout(resolve, 1000));

  // Tavaliselt laadiksite siin faili serverisse üles
  console.log('Fail üles laaditud:', file.name);

  return { message: `Fail ${file.name} edukalt üles laaditud!` };
}

function FileUploadForm() {
  const [state, action] = useFormState(uploadFile, { message: null });

  return (
    
      Valige fail:
      



      

      {state?.message && {state.message}}
    
  );
}

Selles näites hangib uploadFile serveri toiming faili FormData objektist ja töötleb seda. Reaalses rakenduses laadiksite faili tavaliselt üles pilvesalvestusteenusesse nagu Amazon S3 või Google Cloud Storage.

4. Progressiivne täiustamine:

Üks useFormState ja serveri toimingute olulisi eeliseid on võime pakkuda progressiivset täiustamist. See tähendab, et teie vormid saavad endiselt toimida isegi siis, kui JavaScript on kasutaja brauseris keelatud. Vorm esitatakse otse serverisse ja serveri toiming tegeleb vormi esitamisega. Kui JavaScript on lubatud, täiustab React vormi kliendipoolse interaktiivsuse ja valideerimisega.

Progressiivse täiustamise tagamiseks peaksite veenduma, et teie serveri toimingud tegelevad kogu vormi valideerimise ja andmetöötluse loogikaga. Samuti saate pakkuda varumehhanisme kasutajatele ilma JavaScriptita.

5. Juurdepääsetavuse kaalutlused:

Vormide loomisel on oluline arvestada juurdepääsetavusega, et tagada puuetega kasutajatele teie vormide tõhus kasutamine. useFormState aitab teil luua juurdepääsetavaid vorme, pakkudes mehhanisme vigade käsitlemiseks ja kasutajatele tagasiside andmiseks. Siin on mõned juurdepääsetavuse parimad tavad:

Kasutage semantilist HTML-i: Kasutage semantilisi HTML-elemente nagu <label>, <input> ja <button>, et anda oma vormidele struktuur ja tähendus.
Pakkuge selgeid silte: Veenduge, et kõigil vormiväljadel oleksid selged ja kirjeldavad sildid, mis on seotud vastavate sisendelementidega, kasutades for atribuuti.
Käsitsege vigu sujuvalt: Kuvage valideerimisvead selgel ja lühidal viisil ning kasutage ARIA atribuute, et teavitada ekraanilugejatega kasutajaid vigade olemasolust.
Tagage klaviatuuriga navigeerimine: Veenduge, et kasutajad saaksid vormis navigeerida klaviatuuri abil.
Kasutage ARIA atribuute: Kasutage ARIA atribuute, et pakkuda lisateavet abistavatele tehnoloogiatele, näiteks ekraanilugejatele.

useFormState'i kasutamise parimad tavad

Et useFormState hook'ist maksimumi võtta, kaaluge järgmisi parimaid tavasid:

Hoidke serveri toimingud väikesed ja keskendunud: Serveri toimingud peaksid vastutama ühe ülesande eest, näiteks vormiandmete valideerimise või andmebaasi uuendamise eest. See muudab teie koodi lihtsamini mõistetavaks ja hooldatavaks.
Käsitsege vigu sujuvalt: Rakendage oma serveri toimingutes robustset veakäsitlust, et vältida ootamatuid vigu ja pakkuda kasutajale informatiivseid veateateid.
Kasutage valideerimisteeki: Kaaluge valideerimisteegi, nagu Zod või Yup, kasutamist, et lihtsustada vormi valideerimisloogikat.
Andke kasutajale selget tagasisidet: Andke kasutajale selget ja õigeaegset tagasisidet vormi esitamise oleku kohta, sealhulgas valideerimisvead, eduteated ja laadimisindikaatorid.
Optimeerige jõudlust: Minimeerige kliendi ja serveri vahel edastatavate andmete hulka, et parandada jõudlust.

Reaalse maailma näited ja kasutusjuhud

useFormState saab kasutada mitmesugustes reaalsetes rakendustes. Siin on mõned näited:

E-kaubanduse kassavormid: Makseteabe, tarneaadresside ja tellimuste kokkuvõtete käsitlemine.
Kasutaja registreerimis- ja sisselogimisvormid: Kasutajate autentimine ja uute kontode loomine.
Kontaktivormid: Kasutajate päringute ja tagasiside kogumine.
Andmesisestusvormid: Andmete hõivamine ja haldamine erinevates rakendustes.
Küsitlused ja viktoriinid: Kasutajate vastuste kogumine ja tagasiside andmine.

Näiteks kaaluge e-kaubanduse kassavormi. Kasutades useFormState, saate käsitleda tarneaadresside, makseteabe ja muude tellimuse üksikasjade valideerimist serveris. See tagab, et andmed on kehtivad enne nende andmebaasi esitamist, ja parandab ka jõudlust, vähendades kliendipoolset töötlemist.

Teine näide on kasutaja registreerimisvorm. Kasutades useFormState, saate käsitleda kasutajanimede, paroolide ja e-posti aadresside valideerimist serveris. See tagab, et andmed on turvalised ja et kasutaja on õigesti autenditud.

Kokkuvõte

Reacti useFormState hook pakub võimsat ja tõhusat viisi vormi oleku haldamiseks ja vormide käsitlemise loogika lihtsustamiseks. Kasutades serveri toiminguid ja progressiivset täiustamist, võimaldab useFormState teil ehitada robustseid, jõudsaid ja juurdepääsetavaid vorme, mis pakuvad suurepärast kasutajakogemust. Järgides selles juhendis toodud parimaid tavasid, saate tõhusalt kasutada useFormState'i oma vormide käsitlemise loogika lihtsustamiseks ja paremate Reacti rakenduste ehitamiseks. Pidage meeles arvestada globaalsete juurdepääsetavusstandardite ja kasutajate ootustega, kui kujundate vorme mitmekesisele rahvusvahelisele publikule.