1
00:00:02,350 --> 00:00:06,760
Quindi abbiamo trascorso un po 'di tempo sull'input ma la gestione dell'input dell'utente è importante,

2
00:00:06,760 --> 00:00:09,970
vuoi farlo in un modo che sia naturale per l'utente, che

3
00:00:09,970 --> 00:00:11,470
abbia un senso per

4
00:00:11,590 --> 00:00:17,000
l'utente e dove non ti fiderai mai del tuo utente e convalidi sempre cosa l'utente entra e ci immergeremo

5
00:00:17,020 --> 00:00:19,750
più a fondo in tutto questo processo di convalida,

6
00:00:19,750 --> 00:00:24,760
input dell'utente che passerà le cose più avanti nel corso in cui accettiamo anche input più complessi

7
00:00:24,760 --> 00:00:25,520
di un

8
00:00:25,540 --> 00:00:31,030
numero semplice ma per ora, questo è stato un ottimo primo sguardo a come puoi modellare tale un input

9
00:00:31,210 --> 00:00:37,910
e come puoi assicurarti di ottenere i dati di cui hai bisogno. Detto questo, non ti conosco ma penso che sia ora di progredire anche con

10
00:00:37,920 --> 00:00:40,710
il nostro gioco perché siamo un po 'bloccati qui, questi

11
00:00:40,710 --> 00:00:45,600
sono tutti passaggi importanti ma non stiamo davvero progredendo con il nostro gioco o con la nostra app qui .

12
00:00:45,600 --> 00:00:49,520
Quindi assicuriamoci di farlo come prossimo passo e per questo, perché

13
00:00:49,530 --> 00:00:56,690
non ci assicuriamo che i nostri pulsanti facciano qualcosa? Cominciamo con il pulsante di ripristino molto velocemente perché

14
00:00:56,690 --> 00:00:58,760
sarà semplice. Quando lo

15
00:00:58,790 --> 00:01:04,400
premi, ovviamente voglio semplicemente ripristinare il valore inserito. Quindi registrerò una nuova funzione lassù nel componente della

16
00:01:04,410 --> 00:01:10,310
schermata di avvio del gioco, nominerò reset gestore di input e questa è solo la convenzione di denominazione

17
00:01:10,310 --> 00:01:17,450
che mi piace, nomina queste funzioni che vengono attivate su un evento utente qualcosa di handler alla fine solo per farlo chiaro che

18
00:01:17,450 --> 00:01:19,840
questi gestiscono determinati eventi, non è un

19
00:01:19,970 --> 00:01:26,210
must, solo una preferenza che ho per le app React in generale e quindi anche per le app native

20
00:01:26,210 --> 00:01:27,040
di React.

21
00:01:27,260 --> 00:01:34,040
Questa sarà una funzione che quindi chiama imposta il valore immesso che è la nostra funzione di impostazione dello

22
00:01:34,220 --> 00:01:39,370
stato qui per aggiornare lo stato che inseriamo di nuovo nell'input e impostarlo su

23
00:01:39,460 --> 00:01:46,690
una stringa vuota e sì, con ciò possiamo collegarlo al pulsante di ripristino qui, onPress ora dovrebbe semplicemente eseguire il gestore

24
00:01:46,700 --> 00:01:49,540
di input di reset in questo modo.

25
00:01:49,700 --> 00:01:50,780
Facciamo

26
00:01:50,780 --> 00:01:53,760
una prova veloce, inseriamo qualcosa qui,

27
00:01:53,780 --> 00:01:55,110
ripristiniamo e non

28
00:01:55,310 --> 00:01:57,440
c'è più, sta andando

29
00:01:57,470 --> 00:01:58,790
bene e

30
00:01:58,790 --> 00:02:09,390
assicuriamoci che questo pulsante qui, il pulsante di conferma faccia qualcosa. Per questo, aggiungerò un altro pulsante, confermerò il gestore di input e potremmo semplicemente iniziare il

31
00:02:09,420 --> 00:02:12,600
gioco immediatamente qui, ma anche solo per esercitarmi, voglio dare

32
00:02:12,600 --> 00:02:20,030
all'utente un'ultima possibilità di cambiare la sua scelta, quindi qui voglio solo gentile di output a questa è la tua scelta, vuoi iniziare un

33
00:02:20,200 --> 00:02:21,090
messaggio, dove

34
00:02:21,090 --> 00:02:27,050
poi l'utente ottiene un pulsante per iniziare il gioco, solo un ulteriore passo in modo che abbiamo un po

35
00:02:27,360 --> 00:02:30,910
'di pratica in più qui. Per questo, aggiungerò

36
00:02:30,930 --> 00:02:38,800
un nuovo stato che gestisce l'utente ha ancora confermato lo stato e inizialmente, è falso ma ovviamente possiamo cambiarlo

37
00:02:38,910 --> 00:02:43,020
e vogliamo essere in grado di ottenere lo stato corrente.

38
00:02:43,020 --> 00:02:45,980
Quindi qui otteniamo se l'utente ha confermato o no e possiamo

39
00:02:45,990 --> 00:02:52,410
impostare questo stato confermato con quel secondo elemento nell'array che stiamo estraendo. Quindi laggiù nel gestore di input di

40
00:02:52,410 --> 00:03:00,160
conferma, ho impostato confirm su true, sul gestore di input di reset a proposito, ho impostato questo su false perché se

41
00:03:00,160 --> 00:03:05,710
l'utente fa clic su reset, l'utente deve certamente confermare i valori, quindi dovremmo ripristinare questo

42
00:03:05,710 --> 00:03:09,110
e quindi qui nel gestore di input di conferma,

43
00:03:09,160 --> 00:03:12,750
voglio anche fare due cose diverse, altre due cose.

44
00:03:12,880 --> 00:03:20,530
Uno viene ripristinato il valore inserito ma ovviamente salva anche il valore inserito come valore con il quale

45
00:03:20,530 --> 00:03:22,300
avremmo iniziato il gioco.

46
00:03:22,390 --> 00:03:24,840
Possiamo farlo con l'ennesimo

47
00:03:24,880 --> 00:03:34,430
stato che stiamo gestendo che inizialmente non contiene nulla, non ha alcun valore, inizialmente non definito perché dovrebbe essere il

48
00:03:34,430 --> 00:03:40,370
numero selezionato e ora dovrebbe essere anche un numero e non un testo.

49
00:03:40,910 --> 00:03:44,400
Quindi qui abbiamo il numero selezionato e una funzione per

50
00:03:44,480 --> 00:03:51,560
impostarlo e quando l'utente ha fatto clic su Conferma prima di reimpostare il mio valore inserito, anche se questo qui sarà comunque

51
00:03:51,610 --> 00:03:57,290
raggruppato in modo da poter utilizzare il valore inserito dopo averlo impostato su un valore stringa vuota perché

52
00:03:57,470 --> 00:04:02,540
ciò avverrà solo nel prossimo ciclo di rendering e non immediatamente dopo l'esecuzione di questa riga.

53
00:04:02,540 --> 00:04:07,530
Quindi possiamo ancora eseguire o accedere in sicurezza a questo valore inserito da allora in

54
00:04:07,730 --> 00:04:17,930
poi se lo vogliamo perché qui, voglio impostare il mio valore inserito con parseInt passando il valore inserito, quindi ho impostato questo come il mio numero selezionato e, ancora, posso ancora

55
00:04:18,050 --> 00:04:19,300
accedere valore inserito qui

56
00:04:19,340 --> 00:04:24,980
anche se lo ripristiniamo perché questa cosa di ripristino qui verrà sostanzialmente messa in coda da React

57
00:04:25,190 --> 00:04:30,740
e verrà elaborata solo la volta successiva in cui il componente viene visualizzato in seguito e

58
00:04:30,740 --> 00:04:31,480
queste

59
00:04:31,580 --> 00:04:38,660
tre modifiche di stato vengono tutte raggruppate insieme per dare luogo a un ciclo di rendering, quindi noi possiamo accedere in

60
00:04:38,660 --> 00:04:42,850
modo sicuro al valore inserito qui, ma possiamo anche semplicemente farlo prima

61
00:04:42,860 --> 00:04:44,200
di ripristinarlo, non importa.

62
00:04:44,210 --> 00:04:49,520
La cosa importante è tuttavia che analizziamo questo come un numero intero in modo da convertire questo testo in un

63
00:04:49,520 --> 00:04:57,050
numero qui e in realtà, aggiungerò ancora un altro passaggio prima di farlo. All'inizio, avrò qui il mio numero scelto che è

64
00:04:57,140 --> 00:05:00,410
quel numero analizzato e prima di fare

65
00:05:00,410 --> 00:05:08,660
qualsiasi cosa, voglio verificare se il numero scelto non è un numero che è un valore Javascript predefinito, quindi se in

66
00:05:08,660 --> 00:05:16,550
qualche modo non è ancora un numero anche se stiamo cercando di verificare la presenza di caratteri non validi o

67
00:05:16,550 --> 00:05:20,730
se il numero scelto è più piccolo o uguale a zero.

68
00:05:21,200 --> 00:05:24,140
Se lo è, allora voglio solo tornare,

69
00:05:24,140 --> 00:05:25,430
non voglio

70
00:05:25,460 --> 00:05:31,580
continuare, quindi return finirà l'esecuzione della funzione e non confermerà, non lo utilizzerà come valore

71
00:05:31,850 --> 00:05:33,710
perché il valore non è

72
00:05:33,830 --> 00:05:39,010
valido, sono ammessi solo numeri positivi e non sono ammessi numeri non validi.

73
00:05:39,020 --> 00:05:46,340
Inoltre, voglio anche aggiungere un ulteriore controllo e verificare se il numero scelto potrebbe essere maggiore di 99 perché anche questo

74
00:05:46,350 --> 00:05:48,770
non sarebbe consentito, voglio avere un

75
00:05:48,770 --> 00:05:56,600
numero compreso tra 1 e 99 e dovrebbe essere un numero. Se non soddisfa questi criteri, quindi torneremo, ora altrimenti

76
00:05:56,840 --> 00:06:03,740
imposteremo questo numero scelto come numero selezionato e quindi reimposteremo l'input e quindi queste tre chiamate di stato

77
00:06:03,740 --> 00:06:09,440
impostate verranno raggruppate e il componente verrà nuovamente visualizzato e avremo il nostro nuovo stato

78
00:06:09,440 --> 00:06:17,790
che ha preso in considerazione questo numero come numero selezionato. Quindi ora possiamo collegare il gestore di input di conferma al

79
00:06:17,790 --> 00:06:23,700
pulsante di conferma qui e ora alcuni feedback visivi sarebbero anche belli vedere che la

80
00:06:23,700 --> 00:06:32,220
conferma ha funzionato o anche ottenere un errore se abbiamo violato una di queste regole qui, in modo da non limitarci ritorna

81
00:06:32,220 --> 00:06:34,440
ma mostra anche un avviso.

82
00:06:35,320 --> 00:06:41,870
Ora forse iniziamo con il feedback prima di procedere con l'avviso. Per il feedback, qui sotto

83
00:06:42,650 --> 00:06:51,710
questa funzione ma all'interno del nostro componente funzionale, voglio verificare se abbiamo confermato e quindi impostare alcuni

84
00:06:51,710 --> 00:06:54,990
contenuti speciali che dovrebbero essere emessi.

85
00:06:55,010 --> 00:06:58,900
Quindi qui abbiamo l'output confermato che normalmente non

86
00:06:58,970 --> 00:07:07,340
è definito ma se lo abbiamo confermato, l'output confermato è un codice jsx in cui riassumiamo ciò che l'utente ha

87
00:07:07,340 --> 00:07:11,330
inserito e forniamo all'utente il pulsante di avvio del gioco.

88
00:07:11,330 --> 00:07:18,990
Ora solo per vedere se funziona, andiamo con un po 'di testo qui e diciamo solo il numero scelto e

89
00:07:19,020 --> 00:07:22,470
produciamo il numero selezionato qui, il numero selezionato, questo

90
00:07:22,470 --> 00:07:25,700
è il nostro stato che stiamo gestendo qui.

91
00:07:25,770 --> 00:07:32,100
Quindi, dal momento che chiamiamo set confermato e così via, il componente eseguirà nuovamente il rendering

92
00:07:32,100 --> 00:07:38,010
quando viene scelto, quindi l'intera funzione del componente verrà eseguita di nuovo e ciò significa

93
00:07:38,040 --> 00:07:43,470
che confermato sarà quindi vero per la prossima esecuzione perché lo impostiamo su vero

94
00:07:43,500 --> 00:07:44,310
qui

95
00:07:44,310 --> 00:07:51,820
e pertanto imposteremo l'output confermato come quel testo e ora possiamo aggiungere l'output confermato, diciamo qui sotto la nostra scheda.

96
00:07:51,820 --> 00:07:57,340
Quindi lì voglio produrre l'output confermato e questo non è definito,

97
00:07:57,340 --> 00:07:57,940
non

98
00:07:58,060 --> 00:08:05,900
stampa nulla sullo schermo o è questo testo. Con quello salvato se torniamo indietro e inserisco il numero e lo confermo qui, vediamo il

99
00:08:05,900 --> 00:08:06,410
numero.

100
00:08:06,950 --> 00:08:10,210
Se inserisco qualcosa di non valido come zero, non

101
00:08:10,250 --> 00:08:15,360
lo vediamo, quindi il nostro controllo sembra funzionare e viene comunque emesso un numero valido.

102
00:08:15,400 --> 00:08:19,200
Questo non è il progetto finale che voglio avere, ma ciò dimostra che funziona.

103
00:08:19,390 --> 00:08:26,170
Prima di finalizzare questo progetto, assicuriamoci di mostrare anche un avviso se viene inserito qualcosa di non valido.