Form e Controlled Components
Controlled components, uncontrolled components, validazione dei form, React Hook Form, gestione del submit
1Cos'è un controlled component in React?
Cos'è un controlled component in React?
Risposta
Un controlled component è un elemento di form il cui valore è gestito dallo state di React tramite la prop value e un handler onChange. Questo significa che React diventa l'unica fonte di verità per questi dati. A differenza degli uncontrolled components, dove il DOM mantiene il proprio valore, i controlled components offrono il pieno controllo sui dati del form e facilitano la validazione in tempo reale.
2Come creare un controlled input in React?
Come creare un controlled input in React?
Risposta
Un controlled input richiede due elementi essenziali: la prop value legata allo state di React e un handler onChange per aggiornare quello state. Senza onChange, l'input sarebbe in sola lettura poiché React impedirebbe qualsiasi modifica. Questo approccio garantisce che lo state di React rimanga sincronizzato con il valore visualizzato nell'input, consentendo la validazione immediata o la trasformazione dei dati.
3Qual è la differenza tra un controlled component e un uncontrolled component?
Qual è la differenza tra un controlled component e un uncontrolled component?
Risposta
La differenza fondamentale risiede nella fonte di verità per i dati. Un controlled component memorizza il suo valore nello state di React (fonte unica di verità), mentre un uncontrolled component lascia che il DOM gestisca il proprio valore, accessibile tramite una ref. I controlled components offrono più controllo e facilitano la validazione in tempo reale, ma gli uncontrolled components possono essere più semplici per form di base senza validazione complessa.
Come gestire più controlled input nello stesso form?
Come creare un controlled checkbox in React?
+17 domande da colloquio
Altri argomenti di colloquio React / Next.js
Fondamenti di JavaScript
Fondamenti di React
React Hooks
Ciclo di vita dei componenti
React Router
Gestione dello state con Context
Recupero dati e API
React Query (TanStack Query)
Styling & CSS-in-JS
Fondamentali di Next.js
TypeScript con React
Data Fetching in Next.js
Server Actions di Next.js
Routing e Navigazione in Next.js
API Routes di Next.js
Metadata & SEO in Next.js
Middleware e Auth in Next.js
Testing React
Zustand State Management
Ottimizzazione delle Performance React
Error Boundaries & Error Handling
Advanced React Patterns
Funzionalità avanzate di Next.js
Deploy e Produzione con Next.js
Architecture & Design Patterns
React Server Components
Internazionalizzazione di Next.js
React Sicurezza & Best Practices
Padroneggia React / Next.js per il tuo prossimo colloquio
Accedi a tutte le domande, flashcards, test tecnici, esercizi di code review e simulatori di colloquio.
Inizia gratis