Ora per confermare ciò che l'utente
ha inserito, ovviamente voglio fare qualcosa su ogni sequenza di tasti.
Ora abbiamo già ricevuto onChangeText qui come ascoltatore sul titolo per esempio e
quello che facciamo adesso è impostare il titolo nel nostro stato.
Ora il passo successivo è non solo quello,
quindi non solo per salvare l'input ma anche per convalidarlo e anche per gestire la validità di questo input
in uno stato.
Quindi, aggiungerò qui una nuova funzione, ad esempio il gestore della modifica del titolo che ottiene il testo inserito e quindi può fare qualcosa e lo esternalizzerò
in una funzione denominata separata per avere un po 'più pulito, più facile da
seguire lungo il codice perché ora assocerò questo ascoltatore qui al mio evento onChangeText, in modo che questa funzione
venga attivata per ogni sequenza di tasti e lì, ovviamente, imposterò ancora il mio titolo con il testo ma
ora,
come ho già detto, voglio anche gestire la validità e per
questo possiamo aggiungere un altro stato che vogliamo gestire.
Quindi forse qui dopo aver gestito il valore del titolo, possiamo anche avere il titolo è stato valido o qualunque
cosa tu voglia chiamarlo e aggiungere set titolo è valido qui come una funzione setter e
quindi questo stato qui inizialmente potrebbe
essere falso in modo che inizialmente trattiamo questo come non valido. Ora per ogni sequenza di tasti qui nel gestore della modifica
del titolo, prima che possiamo archiviarlo e aggiornare il nostro stato del titolo, possiamo ovviamente convalidarlo
e ora dipende da te come vuoi convalidarlo.
Ora, ad esempio, potresti dire che questo è valido solo se hai un testo che non è vuoto, quindi se la lunghezza del testo è
maggiore di zero. Il testo è ovviamente una
stringa, quindi se la lunghezza è zero, significa che è una stringa vuota.
Possiamo anche chiamare il testo. tagliare per tagliare gli spazi bianchi in eccesso in modo che anche solo un po
'di spazio bianco non sia considerato valido.
Naturalmente, puoi anche aggiungere la convalida della lunghezza minima o massima controllando la lunghezza qui, puoi aggiungere
la convalida dell'espressione regolare per controllare il testo per determinati schemi ed è in realtà
qualcosa che faremo anche in seguito,
ma per iniziare, basta controllarlo in questo modo
e ora qui se siamo maggiori di zero, stiamo bene
ma in realtà se stiamo avendo una lunghezza di zero, non stiamo bene.
Quindi qui voglio
impostare il titolo è valido su falso, altrimenti impostiamo il titolo è
valido
su vero ovviamente, quindi se abbiamo un
input valido e imposteremo sempre il titolo stesso, dobbiamo sempre memorizzarlo, noi
non deve mai perdere l'input
dell'utente, altrimenti interrompiamo l'app.
E ora con la validità del titolo memorizzata nello stato, possiamo ovviamente usarla qui nel nostro codice jsx per
verificare se il titolo non è valido, ad esempio, e in tal caso, possiamo produrre dinamicamente un
testo qui dove, ad esempio, diciamo inserisci un titolo valido per mostrare qui un piccolo messaggio di errore a cui ovviamente
potresti anche assegnare un po 'di stile.
Ora con ciò vedi che se andiamo al nostro input qui, vediamo che il messaggio di
errore fin dall'inizio perché iniziamo in uno stato non valido e se iniziamo a
digitare, questo scompare ma se rimuovo tutto l'input, riappare e questo è alcune convalide di base che potresti aggiungere per mostrare un
piccolo messaggio di errore o un piccolo suggerimento al tuo utente, per assicurarti che gli utenti abbiano almeno un'idea
del tipo di input che desideri.
Ora, ovviamente, puoi utilizzare questa validità non solo per generare messaggi di errore, ma anche per evitare che il
tuo modulo venga inviato se non è valido.
Quindi qui nel gestore di invio, dove invio sempre i miei dati e creo o aggiorno un prodotto, non importa se l'input è valido,
lì possiamo usare i dati di validità che abbiamo raccolto e per esempio
verificare se il titolo è valido e se non lo è valido, quindi il punto esclamativo, quindi restituiamo
semplicemente il che significa che
annulliamo l'esecuzione della
funzione e il codice da quel momento in poi non verrà eseguito e inoltre potremmo non voler
solo restituire, ovviamente possiamo anche importare un avviso
da React Native e lanciare un bel avviso nativo qui. Quindi possiamo semplicemente mostrare un avviso con
un messaggio di input errato o un titolo di quello e un messaggio di per favore controlla gli errori nel modulo e quindi semplicemente aggiungi
un pulsante lì dove diciamo ok perché non c'è nient'altro da fare quindi per confermare, bene con
ciò abbiamo
un buon flusso qui in cui avvertiamo l'utente che l'input non è valido.
Quindi, per esempio ora se provo a inviare questo input con il mio titolo non valido, ottengo questo errore
e solo se inserisco un titolo valido, posso inviarlo perché non ho ancora aggiunto la convalida per gli
altri input che ovviamente dovremmo .
Quindi è così facile iniziare con la validazione.
Ora da quando abbiamo usato Javascript qui, puoi ovviamente portare anche altre librerie di validazione di terze parti, come
ad esempio ValidateJS che è un pacchetto che puoi installare nel tuo progetto e iniziare a usarlo per validare facilmente le
stringhe per determinati pattern se lo desideri fare quello. In questo modulo, scriverò i modelli di
base
che utilizziamo manualmente in modo da avere una chiara comprensione di ciò che sta realmente
accadendo lì, ma puoi assolutamente portare anche tali librerie di terze parti.
Bene e ora con quella comprensione di base sulla convalida e così via,
assicuriamoci che ora ci muoviamo anche verso una gestione di moduli e input più scalabile e che
non coinvolga tonnellate di stati che dobbiamo gestire manualmente.