React useFormState: Formų Valdymo Meistriškumas Optimizuotai Vartotojo Patirčiai

Formos yra esminė interneto programų dalis, leidžianti vartotojams sąveikauti su jūsų programa ir pateikti duomenis. Tačiau formų būsenos valdymas, patvirtinimo (validacijos) tvarkymas ir grįžtamojo ryšio teikimas gali tapti sudėtingas, ypač didelėse ir dinamiškose programose. React useFormState kabliukas (hook), pristatytas su React 18, siūlo galingą ir efektyvų būdą valdyti formų būseną ir supaprastinti formų tvarkymo logiką, taip pagerinant našumą ir vartotojo patirtį. Šis išsamus vadovas nuodugniai nagrinėja useFormState kabliuką, apimdamas jo pagrindines sąvokas, privalumus, praktinius pavyzdžius ir pažangias technikas.

Kas yra React useFormState?

useFormState yra React kabliukas, kuris supaprastina formų būsenos valdymą, apjungdamas būseną ir atnaujinimo logiką į vieną kabliuką. Jis specialiai sukurtas veikti kartu su React Server Components ir Server Actions, leidžiant laipsnišką tobulinimą ir pagerintą našumą, perkeliant formos apdorojimą į serverį.

Pagrindinės Savybės ir Privalumai:

• Supaprastintas Būsenos Valdymas: Centralizuoja formos būseną ir atnaujinimo logiką, sumažina pasikartojančio kodo kiekį ir pagerina kodo skaitomumą.
• Integracija su Serverio Veiksmais: Sklandžiai integruojasi su React Server Actions, leidžiant tvarkyti formų pateikimą ir patvirtinimą serveryje.
• Laipsniškas Tobulinimas: Įgalina laipsnišką tobulinimą, leisdamas formoms veikti net ir be JavaScript, o su įjungtu JavaScript suteikia išplėstą funkcionalumą.
• Optimizuotas Našumas: Sumažina kliento pusės apdorojimą, tvarkant formos logiką serveryje, todėl formos pateikiamos greičiau ir pagerėja programos našumas.
• Prieinamumas: Palengvina prieinamų formų kūrimą, suteikdamas mechanizmus klaidų tvarkymui ir grįžtamojo ryšio teikimui vartotojams su negalia.

useFormState Kabliuko Supratimas

useFormState kabliukas priima du argumentus:

1. Serverio Veiksmas (Server Action): Funkcija, kuri bus vykdoma pateikus formą. Ši funkcija paprastai tvarko formos patvirtinimą, duomenų apdorojimą ir duomenų bazės atnaujinimus.
2. Pradinė Būsena (Initial State): Pradinė formos būsenos vertė. Tai gali būti bet kokia JavaScript reikšmė, pavyzdžiui, objektas, masyvas ar primityvus tipas.

Kabliukas grąžina masyvą su dviem reikšmėmis:

1. Formos Būsena (Form State): Dabartinė formos būsenos vertė.
2. Formos Veiksmas (Form Action): Funkcija, kurią perduodate form elemento action atributui. Ši funkcija iškviečia serverio veiksmą, kai forma pateikiama.

Pagrindinis Pavyzdys:

Panagrinėkime paprastą pavyzdį – kontaktų formą, leidžiančią vartotojams pateikti savo vardą ir el. pašto adresą.

// Serverio veiksmas (pavyzdys - turi būti apibrėžtas kitur)
async function submitContactForm(prevState, formData) {
  // Patvirtinti formos duomenis
  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Prašome užpildyti visus laukus.' };
  }

  // Apdoroti formos duomenis (pvz., išsiųsti el. laišką)
  try {
    // Simuliuoti el. laiško siuntimą
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simuliuoti asinchroninę operaciją
    return { message: 'Dėkojame už jūsų užklausą!' };
  } catch (error) {
    return { message: 'Įvyko klaida. Prašome pabandyti vėliau.' };
  }
}

// React Komponentas
'use client'; // Svarbu Serverio Veiksmams

import { useFormState } from 'react-dom';

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

  return (
    

      Vardas:
      



      El. paštas:
      



      Pateikti

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

export default ContactForm;

Šiame pavyzdyje submitContactForm funkcija yra serverio veiksmas. Ji gauna ankstesnę būseną ir formos duomenis kaip argumentus. Ji patvirtina formos duomenis ir, jei jie teisingi, apdoroja duomenis bei grąžina naują būsenos objektą su sėkmės pranešimu. Jei yra klaidų, ji grąžina naują būsenos objektą su klaidos pranešimu. useFormState kabliukas valdo formos būseną ir pateikia formAction funkciją, kuri perduodama form elemento action atributui. Kai forma pateikiama, submitContactForm funkcija vykdoma serveryje, o gauta būsena atnaujinama komponente.

Pažangios useFormState Technikos

1. Formos Patvirtinimas:

Formos patvirtinimas (validacija) yra labai svarbus siekiant užtikrinti duomenų vientisumą ir gerą vartotojo patirtį. useFormState gali būti naudojamas formos patvirtinimo logikai tvarkyti serveryje. Štai pavyzdys:

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

  let errors = {};

  if (!name) {
    errors.name = 'Vardas yra privalomas.';
  }

  if (!email) {
    errors.email = 'El. paštas yra privalomas.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errors.email = 'Neteisingas el. pašto formatas.';
  }

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

  // Apdoroti formos duomenis (pvz., išsaugoti duomenų bazėje)
  return { message: 'Forma sėkmingai pateikta!', errors: null };
}

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

  return (
    

      Vardas:
      

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

      El. paštas:
      

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

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

Šiame pavyzdyje validateForm serverio veiksmas patvirtina formos duomenis ir grąžina objektą su visomis patvirtinimo klaidomis. Komponentas tada rodo šias klaidas vartotojui.

2. Optimistiniai Atnaujinimai:

Optimistiniai atnaujinimai gali pagerinti vartotojo patirtį, suteikdami neatidėliotiną grįžtamąjį ryšį, net prieš serveriui apdorojant formos pateikimą. Su useFormState ir šiek tiek kliento pusės logikos galite įdiegti optimistinius atnaujinimus, nedelsiant atnaujindami formos būseną po formos pateikimo ir atstatydami atnaujinimą, jei serveris grąžina klaidą.

'use client'

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

async function submitForm(prevState, formData) {
  await new Promise(resolve => setTimeout(resolve, 1000)); // Simuliuoti tinklo delsą

  const value = formData.get('value');
  if (value === 'error') {
    return { message: 'Pateikimas nepavyko!' };
  }
  return { message: 'Pateikimas sėkmingas!' };
}

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 === 'Pateikimas nepavyko!') {
      setOptimisticValue(''); // Atstatyti įvykus klaidai
    }
  };

  return (
    

      Reikšmė:
      


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

Šiame pavyzdyje simuliuojame atidėtą serverio atsakymą. Prieš serverio veiksmui pasibaigiant, įvesties laukas optimistiškai atnaujinamas pateikta reikšme. Jei serverio veiksmas nepavyksta (simuliuojama pateikiant reikšmę 'error'), įvesties laukas atstatomas į ankstesnę būseną.

3. Failų Įkėlimo Tvarkymas:

useFormState taip pat galima naudoti failų įkėlimui tvarkyti. FormData objektas automatiškai tvarko failų duomenis. Štai pavyzdys:

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

  if (!file) {
    return { message: 'Prašome pasirinkti failą.' };
  }

  // Simuliuoti failo įkėlimą
  await new Promise(resolve => setTimeout(resolve, 1000));

  // Paprastai čia įkeltumėte failą į serverį
  console.log('Failas įkeltas:', file.name);

  return { message: `Failas ${file.name} sėkmingai įkeltas!` };
}

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

  return (
    

      Pasirinkite failą:
      



      Įkelti

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

Šiame pavyzdyje uploadFile serverio veiksmas gauna failą iš FormData objekto ir jį apdoroja. Realaus pasaulio programoje paprastai įkeltumėte failą į debesų saugyklos paslaugą, pvz., Amazon S3 ar Google Cloud Storage.

4. Laipsniškas Tobulinimas:

Vienas iš didžiausių useFormState ir Serverio Veiksmų privalumų yra galimybė teikti laipsnišką tobulinimą. Tai reiškia, kad jūsų formos vis dar gali veikti, net jei vartotojo naršyklėje išjungtas JavaScript. Forma bus pateikta tiesiogiai serveriui, o serverio veiksmas tvarkys formos pateikimą. Kai JavaScript įjungtas, React patobulins formą su kliento pusės interaktyvumu ir patvirtinimu.

Siekiant užtikrinti laipsnišką tobulinimą, turėtumėte užtikrinti, kad jūsų serverio veiksmai tvarkytų visą formos patvirtinimo ir duomenų apdorojimo logiką. Taip pat galite pateikti atsarginius mechanizmus vartotojams be JavaScript.

5. Prieinamumo Aspektai:

Kuriant formas, svarbu atsižvelgti į prieinamumą, kad vartotojai su negalia galėtų efektyviai naudotis jūsų formomis. useFormState gali padėti jums sukurti prieinamas formas, suteikdamas mechanizmus klaidų tvarkymui ir grįžtamojo ryšio teikimui vartotojams. Štai keletas geriausių prieinamumo praktikų:

• Naudokite Semantinį HTML: Naudokite semantinius HTML elementus, pvz., <label>, <input> ir <button>, kad suteiktumėte struktūrą ir prasmę savo formoms.
• Pateikite Aiškais Etiketes: Užtikrinkite, kad visi formos laukai turėtų aiškias ir aprašančias etiketes, susietas su atitinkamais įvesties elementais naudojant for atributą.
• Tinkamai Tvarkykite Klaidas: Rodykite patvirtinimo klaidas aiškiai ir glaustai, ir naudokite ARIA atributus, kad įspėtumėte ekrano skaitytuvų naudotojus apie klaidų buvimą.
• Užtikrinkite Naršymą Klaviatūra: Užtikrinkite, kad vartotojai galėtų naršyti po formą naudodami klaviatūrą.
• Naudokite ARIA Atributus: Naudokite ARIA atributus, kad suteiktumėte papildomos informacijos pagalboms technologijoms, tokioms kaip ekrano skaitytuvai.

Geriausios useFormState Naudojimo Praktikos

Norėdami maksimaliai išnaudoti useFormState kabliuką, atsižvelkite į šias geriausias praktikas:

• Serverio Veiksmus Išlaikykite Mažus ir Sutelktus: Serverio veiksmai turėtų būti atsakingi už vieną užduotį, pavyzdžiui, formos duomenų patvirtinimą ar duomenų bazės atnaujinimą. Tai padaro jūsų kodą lengviau suprantamą ir prižiūrimą.
• Tinkamai Tvarkykite Klaidas: Įdiekite patikimą klaidų tvarkymą savo serverio veiksmuose, kad išvengtumėte netikėtų klaidų ir pateiktumėte informatyvius klaidų pranešimus vartotojui.
• Naudokite Patvirtinimo Biblioteką: Apsvarstykite galimybę naudoti patvirtinimo biblioteką, pvz., Zod ar Yup, kad supaprastintumėte formos patvirtinimo logiką.
• Teikite Aišku Grįžtamąjį Ryšį Vartotojui: Teikite aiškų ir savalaikį grįžtamąjį ryšį vartotojui apie formos pateikimo būseną, įskaitant patvirtinimo klaidas, sėkmės pranešimus ir įkėlimo indikatorius.
• Optimizuokite Našumą: Sumažinkite duomenų, perduodamų tarp kliento ir serverio, kiekį, kad pagerintumėte našumą.

Realaus Pasaulio Pavyzdžiai ir Naudojimo Atvejai

useFormState gali būti naudojamas įvairiose realaus pasaulio programose. Štai keletas pavyzdžių:

• El. Komercijos Atsiskaitymo Formos: Mokėjimo informacijos, pristatymo adresų ir užsakymų suvestinių tvarkymas.
• Vartotojų Registracijos ir Prisijungimo Formos: Vartotojų autentifikavimas ir naujų paskyrų kūrimas.
• Kontaktų Formos: Vartotojų užklausų ir atsiliepimų rinkimas.
• Duomenų Įvedimo Formos: Duomenų fiksavimas ir valdymas įvairiose programose.
• Apklausos ir Viktorinos: Vartotojų atsakymų rinkimas ir grįžtamojo ryšio teikimas.

Pavyzdžiui, apsvarstykite el. komercijos atsiskaitymo formą. Naudodami useFormState, galite tvarkyti pristatymo adresų, mokėjimo informacijos ir kitų užsakymo detalių patvirtinimą serveryje. Tai užtikrina, kad duomenys yra teisingi prieš juos pateikiant į duomenų bazę, ir taip pat pagerina našumą, sumažinant kliento pusės apdorojimą.

Kitas pavyzdys – vartotojo registracijos forma. Naudodami useFormState, galite tvarkyti vartotojų vardų, slaptažodžių ir el. pašto adresų patvirtinimą serveryje. Tai užtikrina, kad duomenys yra saugūs ir kad vartotojas yra tinkamai autentifikuotas.

Išvada

React useFormState kabliukas suteikia galingą ir efektyvų būdą valdyti formų būseną ir supaprastinti formų tvarkymo logiką. Pasitelkdamas Serverio Veiksmus ir laipsnišką tobulinimą, useFormState leidžia kurti patikimas, našias ir prieinamas formas, kurios suteikia puikią vartotojo patirtį. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite efektyviai naudoti useFormState norėdami supaprastinti savo formų tvarkymo logiką ir kurti geresnes React programas. Nepamirškite atsižvelgti į pasaulinius prieinamumo standartus ir vartotojų lūkesčius, kurdami formas įvairiai tarptautinei auditorijai.