magdo
39 lines
2.2 KiB
TeX
39 lines
2.2 KiB
TeX
\section{Űrlapkezelés}
|
|
|
|
\begin{frame}{Kontrollált és nem kontrollált input}
|
|
\begin{block}{Kontrollált input}
|
|
Az input mező értékét a React állapot tárolja és vezérli. A \texttt{value} prop és az \texttt{onChange} esemény mindig szinkronban tartja a React állapotot és a mezőt --- bármikor pontosan tudjuk, mi van a mezőben.
|
|
\end{block}
|
|
\vspace{0.3em}
|
|
\begin{block}{Nem kontrollált input}
|
|
A DOM maga kezeli az értéket --- React csak beküldéskor kéri le (\texttt{useRef}-fel). Egyszerűbb felépítés, de valós idejű validáció nehezebb.
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Miért érdemes kontrollált inputot használni?}
|
|
\begin{itemize}
|
|
\item Mindig pontos képünk van az aktuális beviteli értékről --- nem kell a DOM-ból "kiolvasni".
|
|
\item \textbf{Valós idejű validáció:} hibát jelzünk gépelés közben, nem csak beküldéskor.
|
|
\item Feltételes engedélyezés/tiltás, formázás, karakterlimit könnyen kezelhető.
|
|
\item Hátránya: sok mezőnél sok state szükséges --- erre nyújtanak megoldást a könyvtárak.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Validáció --- mit kell ellenőrizni?}
|
|
\begin{itemize}
|
|
\item \textbf{Kötelező mezők:} ne lehessen üres beküldés.
|
|
\item \textbf{Formátum:} email, telefonszám, irányítószám megfelelő-e?
|
|
\item \textbf{Üzleti szabályok:} min. 8 karakteres jelszó, egyező jelszavak, stb.
|
|
\item A hibákat erős vizuális visszajelzéssel kell jelezni --- a felhasználó ne találgasson, mi a baj.
|
|
\end{itemize}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Miért használjunk könyvtárat?}
|
|
\begin{itemize}
|
|
\item Kézi megvalósításnál sok ismétl�'d�' kód keletkezik --- minden mez�'höz saját state, validáció, hibaüzenet.
|
|
\item \textbf{React Hook Form:} minimális újrarenderelés, nagyon gyors, könnyen tanulható API --- a legtöbb esetben ez az ajánlott.
|
|
\item \textbf{Formik:} régebben nagyon népszerű, sok csapat már ismeri; kicsit több boilerplate.
|
|
\item \textbf{Zod / Yup:} séma alapú validáló könyvtárak --- a validációs logikát típusbiztos sémában írjuk le, React Hook Form-mal jól kombinálható.
|
|
\end{itemize}
|
|
\end{frame}
|