1 00:00:02,380 --> 00:00:04,460 Ora per confermare ciò che l'utente 2 00:00:04,480 --> 00:00:07,680 ha inserito, ovviamente voglio fare qualcosa su ogni sequenza di tasti. 3 00:00:07,690 --> 00:00:11,740 Ora abbiamo già ricevuto onChangeText qui come ascoltatore sul titolo per esempio e 4 00:00:11,740 --> 00:00:15,700 quello che facciamo adesso è impostare il titolo nel nostro stato. 5 00:00:15,790 --> 00:00:18,700 Ora il passo successivo è non solo quello, 6 00:00:18,700 --> 00:00:25,270 quindi non solo per salvare l'input ma anche per convalidarlo e anche per gestire la validità di questo input 7 00:00:25,510 --> 00:00:26,780 in uno stato. 8 00:00:26,860 --> 00:00:36,620 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ò 9 00:00:36,620 --> 00:00:41,870 in una funzione denominata separata per avere un po 'più pulito, più facile da 10 00:00:41,870 --> 00:00:48,830 seguire lungo il codice perché ora assocerò questo ascoltatore qui al mio evento onChangeText, in modo che questa funzione 11 00:00:48,830 --> 00:00:55,610 venga attivata per ogni sequenza di tasti e lì, ovviamente, imposterò ancora il mio titolo con il testo ma 12 00:00:55,610 --> 00:00:56,290 ora, 13 00:00:56,300 --> 00:01:00,220 come ho già detto, voglio anche gestire la validità e per 14 00:01:00,230 --> 00:01:03,590 questo possiamo aggiungere un altro stato che vogliamo gestire. 15 00:01:03,590 --> 00:01:10,580 Quindi forse qui dopo aver gestito il valore del titolo, possiamo anche avere il titolo è stato valido o qualunque 16 00:01:10,580 --> 00:01:16,100 cosa tu voglia chiamarlo e aggiungere set titolo è valido qui come una funzione setter e 17 00:01:16,280 --> 00:01:18,780 quindi questo stato qui inizialmente potrebbe 18 00:01:18,800 --> 00:01:27,000 essere falso in modo che inizialmente trattiamo questo come non valido. Ora per ogni sequenza di tasti qui nel gestore della modifica 19 00:01:27,630 --> 00:01:33,180 del titolo, prima che possiamo archiviarlo e aggiornare il nostro stato del titolo, possiamo ovviamente convalidarlo 20 00:01:33,210 --> 00:01:36,320 e ora dipende da te come vuoi convalidarlo. 21 00:01:36,390 --> 00:01:45,130 Ora, ad esempio, potresti dire che questo è valido solo se hai un testo che non è vuoto, quindi se la lunghezza del testo è 22 00:01:45,130 --> 00:01:47,990 maggiore di zero. Il testo è ovviamente una 23 00:01:48,000 --> 00:01:51,650 stringa, quindi se la lunghezza è zero, significa che è una stringa vuota. 24 00:01:51,660 --> 00:01:58,920 Possiamo anche chiamare il testo. tagliare per tagliare gli spazi bianchi in eccesso in modo che anche solo un po 25 00:01:58,920 --> 00:02:00,630 'di spazio bianco non sia considerato valido. 26 00:02:00,660 --> 00:02:05,760 Naturalmente, puoi anche aggiungere la convalida della lunghezza minima o massima controllando la lunghezza qui, puoi aggiungere 27 00:02:05,790 --> 00:02:10,420 la convalida dell'espressione regolare per controllare il testo per determinati schemi ed è in realtà 28 00:02:10,440 --> 00:02:12,820 qualcosa che faremo anche in seguito, 29 00:02:13,170 --> 00:02:15,620 ma per iniziare, basta controllarlo in questo modo 30 00:02:16,110 --> 00:02:19,490 e ora qui se siamo maggiori di zero, stiamo bene 31 00:02:19,500 --> 00:02:23,550 ma in realtà se stiamo avendo una lunghezza di zero, non stiamo bene. 32 00:02:23,550 --> 00:02:25,100 Quindi qui voglio 33 00:02:25,320 --> 00:02:30,870 impostare il titolo è valido su falso, altrimenti impostiamo il titolo è 34 00:02:30,880 --> 00:02:31,810 valido 35 00:02:31,810 --> 00:02:34,810 su vero ovviamente, quindi se abbiamo un 36 00:02:34,810 --> 00:02:40,420 input valido e imposteremo sempre il titolo stesso, dobbiamo sempre memorizzarlo, noi 37 00:02:40,420 --> 00:02:42,580 non deve mai perdere l'input 38 00:02:42,580 --> 00:02:44,410 dell'utente, altrimenti interrompiamo l'app. 39 00:02:44,410 --> 00:02:50,890 E ora con la validità del titolo memorizzata nello stato, possiamo ovviamente usarla qui nel nostro codice jsx per 40 00:02:50,890 --> 00:02:56,980 verificare se il titolo non è valido, ad esempio, e in tal caso, possiamo produrre dinamicamente un 41 00:02:56,980 --> 00:03:04,000 testo qui dove, ad esempio, diciamo inserisci un titolo valido per mostrare qui un piccolo messaggio di errore a cui ovviamente 42 00:03:04,000 --> 00:03:06,670 potresti anche assegnare un po 'di stile. 43 00:03:06,700 --> 00:03:11,530 Ora con ciò vedi che se andiamo al nostro input qui, vediamo che il messaggio di 44 00:03:11,560 --> 00:03:15,900 errore fin dall'inizio perché iniziamo in uno stato non valido e se iniziamo a 45 00:03:15,910 --> 00:03:22,330 digitare, questo scompare ma se rimuovo tutto l'input, riappare e questo è alcune convalide di base che potresti aggiungere per mostrare un 46 00:03:22,390 --> 00:03:27,910 piccolo messaggio di errore o un piccolo suggerimento al tuo utente, per assicurarti che gli utenti abbiano almeno un'idea 47 00:03:27,910 --> 00:03:29,790 del tipo di input che desideri. 48 00:03:29,800 --> 00:03:36,700 Ora, ovviamente, puoi utilizzare questa validità non solo per generare messaggi di errore, ma anche per evitare che il 49 00:03:36,700 --> 00:03:39,780 tuo modulo venga inviato se non è valido. 50 00:03:39,820 --> 00:03:47,230 Quindi qui nel gestore di invio, dove invio sempre i miei dati e creo o aggiorno un prodotto, non importa se l'input è valido, 51 00:03:47,230 --> 00:03:51,190 lì possiamo usare i dati di validità che abbiamo raccolto e per esempio 52 00:03:51,190 --> 00:03:56,530 verificare se il titolo è valido e se non lo è valido, quindi il punto esclamativo, quindi restituiamo 53 00:03:56,550 --> 00:03:58,000 semplicemente il che significa che 54 00:03:58,060 --> 00:03:59,500 annulliamo l'esecuzione della 55 00:03:59,500 --> 00:04:04,770 funzione e il codice da quel momento in poi non verrà eseguito e inoltre potremmo non voler 56 00:04:04,850 --> 00:04:07,490 solo restituire, ovviamente possiamo anche importare un avviso 57 00:04:07,510 --> 00:04:13,630 da React Native e lanciare un bel avviso nativo qui. Quindi possiamo semplicemente mostrare un avviso con 58 00:04:13,630 --> 00:04:24,520 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 59 00:04:25,090 --> 00:04:32,620 un pulsante lì dove diciamo ok perché non c'è nient'altro da fare quindi per confermare, bene con 60 00:04:32,620 --> 00:04:33,870 ciò abbiamo 61 00:04:34,180 --> 00:04:39,760 un buon flusso qui in cui avvertiamo l'utente che l'input non è valido. 62 00:04:39,760 --> 00:04:45,570 Quindi, per esempio ora se provo a inviare questo input con il mio titolo non valido, ottengo questo errore 63 00:04:45,580 --> 00:04:51,250 e solo se inserisco un titolo valido, posso inviarlo perché non ho ancora aggiunto la convalida per gli 64 00:04:51,250 --> 00:04:53,140 altri input che ovviamente dovremmo . 65 00:04:53,140 --> 00:04:56,410 Quindi è così facile iniziare con la validazione. 66 00:04:56,440 --> 00:05:02,260 Ora da quando abbiamo usato Javascript qui, puoi ovviamente portare anche altre librerie di validazione di terze parti, come 67 00:05:02,950 --> 00:05:09,250 ad esempio ValidateJS che è un pacchetto che puoi installare nel tuo progetto e iniziare a usarlo per validare facilmente le 68 00:05:09,250 --> 00:05:15,310 stringhe per determinati pattern se lo desideri fare quello. In questo modulo, scriverò i modelli di 69 00:05:15,310 --> 00:05:15,900 base 70 00:05:15,910 --> 00:05:21,760 che utilizziamo manualmente in modo da avere una chiara comprensione di ciò che sta realmente 71 00:05:21,790 --> 00:05:26,370 accadendo lì, ma puoi assolutamente portare anche tali librerie di terze parti. 72 00:05:26,380 --> 00:05:31,850 Bene e ora con quella comprensione di base sulla convalida e così via, 73 00:05:31,990 --> 00:05:38,530 assicuriamoci che ora ci muoviamo anche verso una gestione di moduli e input più scalabile e che 74 00:05:38,620 --> 00:05:42,550 non coinvolga tonnellate di stati che dobbiamo gestire manualmente.