Ez a cikk megvizsgálja azokat a közös problémákat, amelyekkel a fejlesztők szembesülnek az űrlapokkal való foglalkozáskor – és hogyan vezet be a React 19 végre néhány régóta várt eszközt, amelyek tisztábbá, deklaratívabbá és sokkal kevésbé hibásvá teszik az űrlapkezelést. Az elmúlt hat évben a frontend fejlesztésben – az összetett űrlaprendszerek kiépítésétől az AI-eszközök integrálásáig az SDG-nél – több űrlapkódot írtam, debuggáltam és átalakítottam, mint amennyit szeretnék beismerni. And if you’ve ever built or maintained forms in React, you probably share that feeling. They’re deceptively simple… until they’re not. Ebben a cikkben végig fogom járni azokat a közös küzdelmeket, amelyekkel a fejlesztők szembesülnek, amikor űrlapokkal foglalkoznak - és hogyan Végül bemutat néhány régóta várt eszközt, amelyek tisztabbá, deklaratívabbá és sokkal kevésbé hibásabbá teszik az ✨ React 19 A közös kihívások kezelése formájában Kezdjük a fájdalompontokkal, amelyekkel minden React fejlesztő legalább egyszer szembesült. 1. Boilerplate kód mindenhol A React formanyomtatvány-állapot kezelése általában így kezdődik: const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [error, setError] = useState(null);

function handleSubmit(event) {
  event.preventDefault();
}
 ✅ Egyszerű - és tökéletesen alkalmas a kis formákhoz. De amint felemelkedsz, a végén ismétlődő állapotkapcsolatokba, kézi visszaállításokba és végtelenbe fulladsz. A hívás. Kezdőlap Hírek Megelőzés( Kezdőlap Hírek Megelőzés( Minden gombnyomás újratöltést vált ki, és a hibák vagy a várakozó állapotok kezelése még több állapotváltozót igényel. 2. Props fúrás Ha az űrlap nem csak egy összetevő, hanem a beágyazott összetevők hierarchiája, akkor végül minden szinten átmegy: <Form>
  <Field error={error} value={name} onChange={setName}>
    <Input />
  </Field>
</Form>
 Állapot, hibák, rakodási zászlók – mindezt több rétegben fúrva. Ez nemcsak felfújja a kódot, hanem a karbantartást és a refaktorozást fájdalmasvá teszi. 3. Az optimista frissítések kemények Próbálta-e valaha manuálisan végrehajtani az optimista frissítéseket? Ez az, amikor a felhasználói interfész „sikeres” változását közvetlenül egy felhasználói művelet után jeleníti meg – mielőtt a szerver ténylegesen megerősíti. Könnyűnek tűnik, de a visszafordítási logika kezelése, amikor a kérés sikertelen lehet, valódi fejfájás. Hol tárolod az ideiglenes optimista állapotot?  Hogyan keveredsz össze, majd forgatod vissza? A React 19 valami sokkal tisztábbat vezet be ehhez. useActionState: új módja a formanyomtatványok benyújtásának A React 19 egyik legizgalmasabb kiegészítése a ==*useActionState *==hook. Egyszerűsíti az űrlaplogikát azáltal, hogy egyesíti az aszinkron űrlap benyújtását, az állapotkezelést és a betöltési jelzést – mindezt egy helyen. const [state, actionFunction, isPending] = useActionState(fn, initialState);
 Íme, mi történik most: 
 
 
 
 
 
  — your async function that handles the form submission fn 
 
  — the initial value of your form state initialState 
 
  — a built-in flag showing whether a submission is in progress isPending ENSZ Kezdőlap Ízelítő Hogyan működik Az async funkció átkerült automatikusan két érvet kap: Használat Használat const action = async (previousState, formData) => {
  const message = formData.get('message');

  try {
    await sendMessage(message);
    return { success: true, error: null };
  } catch (error) {
    return { success: false, error };
  }
};
 You then hook it into your form like this: const [state, actionFunction, isPending] = useActionState(action, {
  success: false,
  error: null,
});

return <form action={actionFunction}> ... </form>;
 Most, amikor elküldi az űrlapot, automatikusan reagál: 
 
 
 
 Hívja az async akciót Frissítések ***állapot ***visszaadott eredmény Nyomon követi a benyújtási folyamatot az isPending segítségével akció akció Ízelítő Ízelítő Nincs több kézikönyv vagy állítsa vissza a logikát – a React gondoskodik róla. ️ useState, preventDefault, elkerülni, megelőzni az elhárítást, elkerülni, megelőzni az elhárítást, A note about startTransition If you decide to trigger the form action manually (e.g., outside of the form’s action prop), wrap it with  : startTransition KezdőlapForrás const handleSubmit = async (formData) => {
  await doSomething();

  startTransition(() => {
    actionFunction(formData);
  });
};
 Ellenkező esetben a React figyelmezteti Önt, hogy az átmeneten kívüli async frissítés történt, és Nem frissítik megfelelően. Ízelítő Miért fogod szeretni használniActionState 
 
 
 
 
 ✅ Nincs szükség többszörös ==*felhasználásra Automatikus várakozási állapot (isPending) ✅ Nincs event.preventDefault() szükséges ✅ Automatikus formanyomtatvány visszaállítása sikeres benyújtás után Ízelítő Ízelítő esemény.preventDefault A forma logikája ismét deklaratívnak tűnik - csak leírja a cselekvést, nem a vezetést. useFormStatus: no more props drilling Használati útmutató: Nincs több props fúrás Újabb erőteljes horgász - - megoldja a fák formájában történő prop fúrás problémáját. Használati feltételek import { useFormStatus } from 'react-dom';

const { pending, data, method, action } = useFormStatus();
 Ezt a szálat hook-nak nevezhetjük , és automatikusan csatlakozik a szülői űrlap állapotához. inside any child component of a form Example function SubmitButton() {
  const { pending, data } = useFormStatus();
  const message = data ? data.get('message') : '';

  return (
    <button type="submit" disabled={pending}>
      {pending ? `Sending ${message}...` : 'Send'}
    </button>
  );
}

function MessageForm() {
  return (
    <form action={submitMessage}>
      <SubmitButton />
    </form>
  );
}
 
 
 Kérjük, vegye figyelembe, hogy a SubmitButton hozzáférhet az űrlap adatainak és várakozó állapotának - anélkül, hogy bármilyen jóváhagyást átadnának. Kérjük, vegye figyelembe, hogy a SubmitButton hozzáférhet az űrlap adatainak és várakozó állapotának - anélkül, hogy bármilyen jóváhagyást átadnának. Tovább gombra Gotchas to remember Gotha emlékezetes 
 
 
 
 Nem működik, ha ugyanazon a komponenst hívja, amelyben az űrlap megjelenik. 💡 Nem reagál az onSubmit kezelőket használó űrlapokra – az ***action ***prop űrlapnak kell lennie. ⚠️ Mostanra a formMethod felülírja a gombokat vagy a bemeneteket (például a formMethod=”get”) nem működik a várt módon - az űrlap még mindig a fő módszert használja. Megnyitottam a__problémát a GitHub-on__, hogy nyomon kövessem ezt a hibát. Támogatás Formázás FormMethod = „get” Miért fontos a formázás Eltávolítja a prop fúrást fák formájában Lehetővé teszi a gyermekkomponenseken belüli kontextusbeli döntéseket 💡 Tartja az alkatrészeket leválasztva és tisztább felhasználásOptimista: deklaratív optimista felhasználói felület Végül beszéljünk az egyik kedvenc kiegészítésemről - . useOptimistic Használatoptimalizálás Beépített támogatást nyújt az optimális felhasználói felület frissítéséhez, így a felhasználói interakciók azonnali és zökkenőmentes. A probléma Képzelje el, hogy rákattint a „Letöltés kedvencekbe” gombra, és azonnal meg szeretné jeleníteni a frissítést – a kiszolgáló válaszát megelőzően. Hagyományosan a helyi állapot, a rollback logika és az async kérelmek között kell játszani. A megoldás Azokkal , a deklaratív és a minimális lesz: Használatoptimalizálás Használatoptimalizálás Használatoptimalizálás const [optimisticMessages, addOptimisticMessage] = useOptimistic(
  messages,
  (state, newMessage) => [newMessage, ...state]
);

const formAction = async (formData) => {
  addOptimisticMessage(formData.get('message'));
  try {
    await sendMessage(formData);
  } catch {
    console.error('Failed to send message');
  }
};
 Ha a kiszolgálói kérés sikertelen, a React automatikusan visszatér az előző állapotba. Ha ez sikerül, az optimista változás marad. Fontos szabály: ne változtass Az optimalizálásra átadott frissítési funkciót a : pure Ez a tévedés: (prev, newTodo) => {
  prev.push(newTodo);
  return prev;
}
 Ez a helyes: (prev, newTodo) => [...prev, newTodo];
 
 
 Mindig adjon vissza egy új állapotú objektumot vagy tömböt! Mindig adjon vissza egy új állapotú objektumot vagy tömböt! A StartTransition használatával Ha az optimista frissítéseket egy űrlapon kívüli Helyezze őket a : akció KezdőlapForrás akció KezdőlapForrás startTransition(() => {
  addOptimisticMessage(formData.get('message'));
  sendMessage(formData);
});
 Ellenkező esetben a React figyelmezteti Önt, hogy egy optimista frissítés történt egy átmeneten kívül. Az optimalizálás előnyei 
 
 
 
 
 Azonnali visszajelzés Automatikus hibaelhárítás Tisztább komponens logika Kevesebb rakodóállam szükséges Ez az a fajta UX javítás, amit a felhasználók érznek - még akkor is, ha nem tudják, hogy miért érezte magát az alkalmazás hirtelen olyan gyorsan. következtetések A React 19 jelentősen leegyszerűsíti az űrlapkezelést - és egyszerre nem új szintaxisról van szó, hanem valódi fejlesztői tapasztalatok fejlesztéséről. Itt van egy gyors áttekintés arról, hogy mit kell használni és mikor: 
 
 
 
 
 
 
 
 
 
 Goal 
 React 19 Tool 
 
 
 
 Access form submission result 
 useActionState 
 
 
 
 Track pending submission 
  from   or   from  isPending useActionState pending useFormStatus 
 
 
 
 Access form state deep in children 
 useFormStatus 
 
 
 
 Handle optimistic UI updates 
 useOptimistic Access form submission result useActionState Használat Track pending submission  from   or   from  isPending useActionState pending useFormStatus Ízelítő Használat függőben Használati feltételek Access form state deep in children useFormStatus Használati feltételek Handle optimistic UI updates useOptimistic Használatoptimalizálás Ezek a horgok a React formáit deklaratívvá, komposztálhatóvá és sokkal kevésbé zajosvá teszik. Ha valaha is úgy érezte, hogy a React űrlapokkal való munka a kazánlemezek írását jelenti, csak azért, hogy a dolgok szinkronban maradjanak - a React 19 a várt kiadás. ✨ Csatlakozzon egy csapathoz, amely a React 19 segítségével formálja a webes élmények jövőjét! az intelligensebb, gyorsabb és dinamikusabb interfészeket építünk – és bérelünk. Szociális felfedezési csoport 
 
 Szergej Levkovics, a Social Discovery Group vezető frontend fejlesztője. Szergej Levkovics, a Social Discovery Group vezető frontend fejlesztője. Írva a Senior Frontend fejlesztő . Szergej Levkovics Szociális felfedezési csoport Szergej Levkovics Szergej Levkovics Szociális felfedezési csoport Szociális felfedezési csoport

This story contains new, firsthand information uncovered by the writer.

See how we create Social Life 3.0 👉

Social Discovery Group Earns the Great Place To Work® Certification in the USA!

Swipe Away Loneliness: 2024 Dating Trends Forecast

Ez a hanganyag a történet eredeti nyelvén készült!

React 19: Új eszközök a formákkal való munkavégzéshez

About Author

HOZZÁSZÓLÁSOK

HANG TAGOK

EZT A CIKKET BEMUTATTA

Related Stories

A SECOND ENIGMA

HackerNoon Raises $250k at $50M Valuation From Forward Research

The Little Shop at Fishbourne

Of The First and Last Things: Part 1

A SECOND ENIGMA

HackerNoon Raises $250k at $50M Valuation From Forward Research

The Little Shop at Fishbourne

Of The First and Last Things: Part 1

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps