Form in React Native: input, validazione e tastiera
Guida a form e validazione in React Native
Form in React Native: input controllati e validazione | We.Inc
Crea un form React Native con TextInput controllati, una sola funzione validate, messaggi di errore sotto ogni campo e gestione della tastiera. Prova la validazione dal vivo nel browser.
Un form React Native affidabile ha bisogno di tre elementi: TextInput controllati dallo state, una funzione validate che restituisce un errore per campo, e la gestione della tastiera. Mostra ogni messaggio quando la persona ha lasciato quel campo o ha premuto invio. Racchiudi la schermata in KeyboardAvoidingView e imposta keyboardShouldPersistTaps="handled" sulla ScrollView così il pulsante di invio resta raggiungibile.
Gli elementi di un form React Native
Compito
Strumento
Conservare i valori
useState con un unico oggetto, o un hook per campo
Controllare i valori
Una funzione pura validate(values) che restituisce un oggetto errors
Mostrare gli errori
Text sotto ogni campo, collegato tramite accessibilityLabel o una live region
Tenere visibili i campi
KeyboardAvoidingView con behavior="padding" su iOS
Premere invio con la tastiera aperta
keyboardShouldPersistTaps="handled" sulla ScrollView
Passare da un campo all'altro
returnKeyType="next" e focus() sul ref successivo
Le regole di validazione in questa pagina sono semplice JavaScript, quindi l'anteprima qui sotto esegue esattamente la funzione che incolleresti nella tua schermata React Native. Compila i campi, lasciali, e premi Crea account per vedere ogni messaggio comparire e sparire.
Ogni campo scrive in un unico oggetto values tramite onChangeText.
onBlur segna un campo come toccato, così il suo errore può comparire senza aggredire chi sta ancora scrivendo.
validate(values) viene eseguita a ogni render e restituisce un oggetto con un messaggio per ogni regola violata.
L'invio segna tutti i campi come toccati e si ferma se l'oggetto errors ha delle chiavi.
Quando non restano errori, l'handler invia i valori e può chiamare Keyboard.dismiss().
Mantieni validate pura così puoi testarla senza renderizzare nulla e riutilizzarla sul server.
Non disattivare il pulsante di invio mentre il form non è valido; premerlo è il modo in cui molte persone scoprono cosa manca.
Metti il testo dell'errore subito sotto il suo campo, con parole che spiegano come risolvere il problema.
Togli gli spazi dagli indirizzi email prima di controllarli; uno spazio finale incollato è il falso errore più comune.
Ricontrolla tutto sul server. Le regole lato client guidano le persone ma non sono affidabili.
Domande frequenti
Mi serve una libreria per i form in React Native?
No. Pochi campi funzionano bene con useState e una funzione validate come quella di questa pagina. Le librerie aiutano quando un form ha molti campi, array annidati o controlli asincroni, e React Hook Form si descrive come funzionante sia sul web sia in React Native.
Come evito che la tastiera copra i miei input?
Racchiudi il form in KeyboardAvoidingView. Cambia altezza, posizione o padding inferiore per adattarsi alla tastiera; behavior="padding" è la scelta comune su iOS. keyboardVerticalOffset tiene conto di un header sopra la view e vale 0 per default.
Perché il mio pulsante di invio richiede due tocchi?
keyboardShouldPersistTaps della ScrollView vale "never" per default, quindi il primo tocco chiude solo la tastiera. Impostalo su "handled" e il pulsante riceve il tocco subito.
Come chiudo la tastiera dopo l'invio?
Chiama Keyboard.dismiss(), che secondo la documentazione chiude la tastiera attiva e toglie il focus.
Quando mostrare un errore
Mostrare ogni regola in rosso appena si apre la schermata sembra un rimprovero. Tieni traccia dei campi che la persona ha toccato e mostra un messaggio solo dopo che ha lasciato quel campo, o dopo un tentativo di invio.
Una volta che un messaggio è visibile, ripeti il controllo a ogni tasto premuto così sparisce nel momento in cui il valore diventa valido. Quella conferma immediata è la ricompensa per aver aspettato prima di mostrarlo.
Rendere accessibili gli errori
Un bordo rosso da solo non dice nulla a chi usa uno screen reader o vede poco i colori. Scrivi il problema come testo, e includilo nell'accessibilityLabel del campo così viene letto quando il focus arriva lì.
Su Android, accessibilityLiveRegion="polite" sul Text dell'errore fa annunciare a TalkBack il messaggio quando compare, senza spostare il focus.
Codice del form da copiare
La funzione validate
Semplice JavaScript senza import di React Native, quindi funziona nei test, nell'anteprima web e su un server.
Schermata di registrazione con campi toccati e gestione della tastiera
Un oggetto values, un oggetto touched e un helper Field che mostra il suo errore solo quando serve.
Inserisci il tuo nome.
Inserisci il tuo indirizzo email.
A questo indirizzo email manca una @ o un dominio.
Usa almeno 8 caratteri.
Le due password non coincidono.
Anteprima della validazione
I controlli eseguono la funzione validate del codice qui sotto. I messaggi compaiono dopo che lasci un campo o premi il pulsante.
Nome
Password
Conferma password
Crea account
Tutti i campi sono validi. Un'app reale invierebbe ora i valori.