1
00:00:02,390 --> 00:00:07,550
Ora con questa azione inviata, possiamo andare al riduttore e scrivere un po 'di codice qui in cambio di input e questo

2
00:00:08,170 --> 00:00:09,440
è un codice molto semplice.

3
00:00:09,440 --> 00:00:18,650
Restituiamo un nuovo stato in cui copio il mio vecchio stato e voglio aggiornare il valore con un'azione. valore perché value è una proprietà che ho in questa

4
00:00:19,400 --> 00:00:25,650
azione, l'altra è isValid e questa è l'altra cosa che voglio anche aggiornare ad

5
00:00:25,650 --> 00:00:30,710
ogni sequenza di tasti, isValid per questo input, non per l'intero

6
00:00:30,710 --> 00:00:38,420
modulo ma per questo input gestito internamente. Non aggiornerò toccato qui, invece toccato dovrebbe essere aggiornato quando in

7
00:00:38,930 --> 00:00:43,490
realtà perdiamo il focus perché ciò significa che l'utente ha finito di inserire il contenuto

8
00:00:43,490 --> 00:00:52,550
per il momento, quindi ora voglio contrassegnarlo come toccato e possibilmente mostrare errori di convalida. Quindi qui, il gestore della messa a fuoco persa

9
00:00:52,580 --> 00:00:56,690
è una funzione che aggiungo e lì, invierò

10
00:00:59,970 --> 00:01:01,890
un'azione. Ora, creerò

11
00:01:01,890 --> 00:01:04,470
un identificatore di azione qui, input

12
00:01:04,710 --> 00:01:16,170
sfocatura, come questo, input sfocatura come questo e ora possiamo inviare input sfocatura qui, non è necessario allegare alcun dato e ora nel nostro riduttore, possiamo usare che

13
00:01:16,170 --> 00:01:24,060
con un altro caso, input sfocato e, in tal caso, restituisco un nuovo stato in cui copio il vecchio

14
00:01:24,060 --> 00:01:29,280
stato perché voglio mantenere il valore ed è valido e non modificarlo,

15
00:01:29,280 --> 00:01:36,620
ma voglio impostare toccato su vero, quindi non appena quando sfociamo un input, viene trattato come toccato.

16
00:01:36,750 --> 00:01:44,110
Ora dobbiamo solo collegare questa funzione, quindi imposterò qui l'ascoltatore onBlur e indicherò il gestore della messa a fuoco persa in modo

17
00:01:44,110 --> 00:01:46,870
che questo si inneschi quando questo input sfoca.

18
00:01:49,850 --> 00:01:57,100
Ora è tutto a posto e questo gestirà lo stato all'interno di questo input, ovviamente devo

19
00:01:57,190 --> 00:02:03,370
comunque inoltrare il valore e le informazioni, sia che l'input sia valido o

20
00:02:03,370 --> 00:02:14,700
meno, ai miei genitori, quindi alla schermata di modifica del prodotto. Quindi ciò che possiamo fare è aggiungere qui l'effetto use come importazione nel componente

21
00:02:14,700 --> 00:02:15,310
input

22
00:02:18,430 --> 00:02:28,070
e magari aggiungerlo qui e nella funzione effect use, voglio chiamare una funzione che mi aspetto di ottenere tramite oggetti di scena, magari

23
00:02:28,130 --> 00:02:40,980
in cambio di input, il nome spetta a te e lo eseguirò e inoltrerò il mio valore dello stato di input e il mio stato di input sono informazioni valide, in

24
00:02:40,980 --> 00:02:48,540
modo che nel componente padre, possiamo aggiungere qui una funzione che ascolta quella alla fine, che viene attivata,

25
00:02:48,540 --> 00:02:53,790
che riceve questi due argomenti e quindi nel genitore, quindi nel componente dello

26
00:02:53,790 --> 00:03:00,310
schermo, possiamo aggiornare il nostro stato lì. Ora la cosa importante è quando questo effetto dovrebbe essere

27
00:03:00,310 --> 00:03:07,420
eseguito e non dovrebbe essere eseguito dopo ogni sequenza di tasti? Invece, questo dovrebbe essere eseguito ogni volta che

28
00:03:07,420 --> 00:03:17,780
il nostro valore dello stato di input o è naturalmente valido, poiché è ciò da cui dipendiamo o per essere precisi, potremmo anche inviare

29
00:03:17,780 --> 00:03:25,910
queste informazioni solo se lo stato di input toccato è vero perché altrimenti il componente genitore potrebbe non interessarsene.

30
00:03:26,100 --> 00:03:31,680
Quindi ora la nostra dipendenza qui è l'intero stato di input perché usiamo tutti i valori ma continueremo ad attivare

31
00:03:31,680 --> 00:03:36,600
questa funzione sul componente genitore solo se toccato è vero, quindi questo effetto verrà eseguito più spesso

32
00:03:36,600 --> 00:03:42,240
ma la maggior parte delle volte non farà nulla fintanto che il tocco non è vero e gli oggetti di scena

33
00:03:42,480 --> 00:03:49,170
ovviamente sono anche la nostra dipendenza, ora per evitare un loop di rendering infinito qui, possiamo usare la sintassi destrutturante dell'oggetto ed estrarre il

34
00:03:49,650 --> 00:03:56,640
cambio di input, così che se altri oggetti di scena cambiano, non lo facciamo rifiutare questo effetto perché sul cambiamento di input è ciò di cui

35
00:03:56,640 --> 00:04:01,890
abbiamo bisogno laggiù e ora possiamo aggiungere che questa è una dipendenza e le altre cose, altri cambiamenti negli

36
00:04:01,890 --> 00:04:03,820
oggetti di scena non lo innescano.

37
00:04:04,260 --> 00:04:10,620
Quindi ora lo chiamiamo sul componente padre ogni volta che viene toccato e quindi inoltriamo il valore e la

38
00:04:10,650 --> 00:04:13,470
validità di questo input al componente padre.

39
00:04:16,680 --> 00:04:23,400
Quindi ora usiamolo nella schermata di modifica del prodotto, lì sui nostri input come sull'input del titolo, possiamo aggiungere il prop di

40
00:04:23,400 --> 00:04:29,670
modifica dell'input on e questo è il prop che ho scelto come target qui, quindi è necessario ottenere quel nome giusto

41
00:04:29,670 --> 00:04:34,230
e questo si aspetta di ottenere una funzione come valore che a sua volta riceverà

42
00:04:34,230 --> 00:04:38,140
due argomenti quando viene chiamato: il valore e la validità di quell'input.

43
00:04:38,220 --> 00:04:44,490
Quindi qui voglio puntare a una funzione e questo può essere il nostro, diciamo, gestore del cambio di input, possiamo

44
00:04:44,490 --> 00:04:46,910
riciclarlo, lo rinomino per essere più adatto.

45
00:04:47,130 --> 00:04:55,070
Quindi il gestore del cambiamento di input può essere attivato qui, in questo modo, lì voglio ancora passare il mio identificatore perché

46
00:04:55,100 --> 00:04:59,930
voglio riutilizzarlo per tutti i miei input e ora dal momento che sono nel

47
00:04:59,930 --> 00:05:07,940
componente dello schermo, avremo più input e lì , quindi otteniamo il nostro identificatore e quindi otteniamo il valore e le informazioni

48
00:05:07,940 --> 00:05:09,410
sono valide, giusto?

49
00:05:09,410 --> 00:05:15,740
Quindi valore di input e validità di input, questo è ciò che otteniamo, giusto, perché è

50
00:05:15,740 --> 00:05:19,940
quello che inoltriamo dall'interno del componente di input qui, questo

51
00:05:19,940 --> 00:05:22,510
è ciò che passiamo a

52
00:05:22,580 --> 00:05:31,110
questo sulla funzione di cambio di input. Pertanto, qui non è necessario eseguire la convalida, è sufficiente inoltrare tali informazioni. Inoltriamo il valore di input, inoltriamo la validità di

53
00:05:31,110 --> 00:05:38,310
input e questo accadrà solo quando l'input viene toccato a proposito, quindi quando perde lo stato attivo e ovviamente questa è solo

54
00:05:38,310 --> 00:05:38,760
una

55
00:05:38,790 --> 00:05:40,320
limitazione che ho aggiunto

56
00:05:43,310 --> 00:05:48,010
qui, che devi aver perso lo stato, tu ovviamente potrebbe anche andare al componente

57
00:05:48,020 --> 00:05:53,060
di input e rimuoverlo se si seleziona per aggiornare la validità e il valore nel componente

58
00:05:53,060 --> 00:05:59,260
parent per ogni input, per ogni sequenza di tasti. Ora un'altra cosa che voglio fare, voglio racchiuderla in

59
00:05:59,260 --> 00:06:07,390
una chiamata di callback di uso qui, in modo che questa funzione non venga ricostruita inutilmente perché tieni presente che abbiamo passato questa funzione

60
00:06:07,510 --> 00:06:13,050
su al cambio di input nel componente di input e lì d'altra parte, questa è una

61
00:06:13,060 --> 00:06:13,630
dipendenza

62
00:06:13,630 --> 00:06:15,400
di questo effetto, quindi questo

63
00:06:15,430 --> 00:06:18,190
effetto si ripeterà ogni volta che questo cambia.

64
00:06:18,190 --> 00:06:22,780
Quindi non dovrebbe cambiare troppo spesso per evitare inutili esecuzioni di effetti e qui

65
00:06:22,810 --> 00:06:28,900
dobbiamo quindi dichiarare le nostre dipendenze e l'unica dipendenza che abbiamo è lo stato del modulo di spedizione che

66
00:06:29,080 --> 00:06:31,690
in realtà non cambierà mai, quindi siamo bravi,

67
00:06:31,690 --> 00:06:32,430
questo

68
00:06:32,430 --> 00:06:35,620
non dovrebbe mai ricostruire perché il la logica lì dentro

69
00:06:35,680 --> 00:06:43,690
non cambia, otteniamo tutti i valori di cui abbiamo bisogno come argomenti. Con quello nella mia schermata di modifica del prodotto, ho ancora i miei moduli che ovviamente con tutti i valori del modulo e le validità del modulo ma riesco

70
00:06:50,310 --> 00:06:55,600
solo questo qui perché devo inviarlo in un secondo momento e perché devo derivare la validità complessiva del modulo. Non lo faccio perché

71
00:06:55,600 --> 00:06:58,280
devo gestire ogni input qui,

72
00:06:58,390 --> 00:07:05,100
lo facciamo invece dall'interno del componente input. Per l'invio e così via,

73
00:07:05,100 --> 00:07:06,460
abbiamo

74
00:07:06,500 --> 00:07:18,810
ancora bisogno delle informazioni su ogni negozio, il valore comunque. Ora, se torno all'input, non dimenticare che devi anche impostare il valore iniziale prop

75
00:07:19,320 --> 00:07:22,600
e se questo dovrebbe essere inizialmente

76
00:07:22,680 --> 00:07:31,290
valido, quindi se torno alla schermata di modifica del prodotto, ora dovremmo impostare il valore iniziale su che cosa?

77
00:07:31,320 --> 00:07:35,640
Bene, possiamo verificare se abbiamo un prodotto modificato e se lo facciamo, allora il valore iniziale qui dovrebbe

78
00:07:35,640 --> 00:07:37,150
essere modificatoProdotto. titolo,

79
00:07:37,170 --> 00:07:44,760
altrimenti è una stringa vuota e questo dovrebbe essere inizialmente valido, quindi usa questo prop qui

80
00:07:45,480 --> 00:07:47,480
se abbiamo un prodotto

81
00:07:49,830 --> 00:07:51,860
modificato, quindi se è

82
00:07:51,870 --> 00:08:00,780
così, con il doppio botto qui, se questo è vero. Se non abbiamo prodotti modificati, allora questo non può essere inizialmente valido,

83
00:08:00,780 --> 00:08:01,530
quindi

84
00:08:01,530 --> 00:08:03,390
passo falso, il che è

85
00:08:03,390 --> 00:08:07,210
positivo, ed è proprio quello che dovrebbe essere il caso.

86
00:08:07,280 --> 00:08:13,040
Ora possiamo copiare queste due righe, anche su imageUrl, ovviamente inoltriamo il valore dell'URL dell'immagine

87
00:08:13,040 --> 00:08:20,400
come valore predefinito, a parte questo, può rimanere così. Per il prezzo, non avremo mai un valore iniziale

88
00:08:20,400 --> 00:08:25,650
e non sarà mai inizialmente valido. Per la descrizione d'altra parte, possiamo

89
00:08:25,660 --> 00:08:28,950
ancora aggiungere questo e qui puntare alla descrizione.

90
00:08:32,270 --> 00:08:39,050
Ora con ciò, c'è una cosa che devo correggere nel componente di input a cui ho anche pensato, ovviamente

91
00:08:39,050 --> 00:08:43,450
qui, lo stato del modulo non è più disponibile, invece qui abbiamo

92
00:08:43,450 --> 00:08:47,950
il nostro stato interno e ho chiamato questo stato di input, ovvero cosa

93
00:08:47,960 --> 00:08:49,870
restituisce il mio riduttore, quindi

94
00:08:50,120 --> 00:08:51,700
dovremmo usarlo qui ovviamente.

95
00:08:51,700 --> 00:08:57,830
Quindi qui abbiamo inputState. valore come valore, è semplice come

96
00:08:57,920 --> 00:09:03,590
quello e qui abbiamo inputState. isValid come controllo e dovrebbe essere tutto.

97
00:09:03,590 --> 00:09:10,060
Ora se lo salviamo e diamo un'occhiata a questo, vediamo se funziona. Se andiamo qui, inizialmente abbiamo tutti i messaggi di

98
00:09:10,060 --> 00:09:13,360
errore che hanno senso perché inizialmente sono tutti non

99
00:09:13,790 --> 00:09:20,500
validi, se comincio a digitare qui, ricevo un errore, non riesco a trovare la variabile isValid nel mio componente

100
00:09:20,500 --> 00:09:26,910
di input, che deve essere in quell'handler che spara ad ogni pressione del tasto, probabilmente qui, sì nel riduttore

101
00:09:26,920 --> 00:09:30,000
ovviamente dovrei controllare l'azione.

102
00:09:30,000 --> 00:09:32,490
isValid, non solo isValid,

103
00:09:32,730 --> 00:09:37,470
devo ottenerlo dall'azione. Quindi, con quella correzione qui,

104
00:09:37,480 --> 00:09:42,240
torniamo indietro e proviamo di nuovo. Se comincio a digitare, questo viene

105
00:09:42,270 --> 00:09:46,530
cancellato, se lo ripristino, il mio errore non ritorna, quindi è un

106
00:09:46,530 --> 00:09:50,800
piccolo errore che dovremo correggere. Per il prezzo, 0 non

107
00:09:50,800 --> 00:09:55,330
viene quindi considerato valido, uno anche non lo è, quindi la

108
00:09:55,350 --> 00:09:58,590
convalida ha alcuni problemi ma l'immissione e così

109
00:09:58,590 --> 00:10:03,490
via funziona, ma vediamo ora cosa c'è che non va nella convalida.

110
00:10:03,500 --> 00:10:07,090
Beh, ovviamente il modo in cui funziona la validazione, non la stiamo usando.

111
00:10:07,100 --> 00:10:12,290
Tieni presente che controllo sempre se questo tipo di convalida è abilitato per questo input o questo tipo o questo tipo e lo facciamo con

112
00:10:12,290 --> 00:10:17,000
l'aiuto di questi speciali oggetti di scena che dobbiamo impostare. Al momento non è abilitata

113
00:10:17,030 --> 00:10:22,980
alcuna convalida, quindi vengono presi in considerazione solo i valori non validi predefiniti.

114
00:10:23,060 --> 00:10:28,610
Quindi, se vado alla schermata di modifica del prodotto, ora abilitiamo questa speciale convalida impostando i

115
00:10:28,610 --> 00:10:39,170
puntelli giusti, ad esempio qui sull'input del titolo, richiesto. Su imageUrl, anche richiesto. Sul prezzo qui, richiesto e forse anche

116
00:10:39,470 --> 00:10:47,540
min uguale a zero, quindi zero è il numero minimo che dobbiamo inserire o un numero

117
00:10:47,540 --> 00:10:48,350
maggiore

118
00:10:48,380 --> 00:10:58,480
di quello in realtà, quindi forse 0. 1 è il nostro numero minimo. Per la descrizione, dovrebbe anche essere richiesto e forse anche una

119
00:10:58,540 --> 00:11:05,100
lunghezza minima pari a 5, per avere almeno 5 caratteri. C'è anche un'altra cosa che dobbiamo fare qui nella schermata

120
00:11:05,100 --> 00:11:11,070
di modifica del prodotto, questo sul gestore di modifica dell'input qui deve anche essere aggiunto a ogni

121
00:11:11,130 --> 00:11:16,870
input ovviamente, non solo all'input del titolo. Quindi dobbiamo aggiungere questo per

122
00:11:16,870 --> 00:11:26,760
imageUrl, altrimenti avremo un errore in seguito, dovremo aggiungerlo qui all'input del prezzo, dovremo anche aggiungerlo qui ovviamente all'input della

123
00:11:26,760 --> 00:11:30,580
descrizione e sostituire l'identificatore nella giusta direzione.

124
00:11:32,810 --> 00:11:36,010
Quindi proviamo questo e noterai qualcosa di strano,

125
00:11:36,040 --> 00:11:39,000
se scrivi qui, che funziona, se scrivi

126
00:11:39,000 --> 00:11:41,210
imageUrl, non funziona bene,

127
00:11:41,220 --> 00:11:47,300
la validazione non si aggiorna e non puoi tornare indietro, almeno questo potrebbe essere bloccato.

128
00:11:47,310 --> 00:11:54,990
Quindi, se ricarichiamo questo con errore di comando o premendo due volte R su Android e diamo un

129
00:11:55,010 --> 00:12:00,950
altro tentativo qui, diciamo sul prezzo che noterai che funziona ma perché non funziona

130
00:12:00,950 --> 00:12:05,630
e lo stesso sarebbe il caso a proposito se l'hai provato

131
00:12:05,670 --> 00:12:10,200
su imageUrl, qui funziona. Perché funziona se in precedenza ho modificato un altro

132
00:12:10,200 --> 00:12:15,100
input perché ora, ad esempio, non funziona più su un titolo? E il problema è legato al fatto che questo è bloccato qui.

133
00:12:15,390 --> 00:12:22,500
Stiamo rilanciando questo componente troppo spesso e la ragione di ciò è davvero difficile da rintracciare.

134
00:12:23,010 --> 00:12:24,980
Alla fine, abbiamo una specie di ciclo infinito qui

135
00:12:24,990 --> 00:12:27,290
e il problema è il nostro gestore del cambiamento di input.

136
00:12:27,420 --> 00:12:34,290
Stiamo usando il callback qui per evitare attività ricreative non necessarie, ma legandolo in questo modo, rendiamo questo

137
00:12:34,290 --> 00:12:40,710
obsoleto, non fa alcuna differenza ora perché ciò creerà una nuova funzione di associazione per ogni

138
00:12:40,800 --> 00:12:42,230
ciclo di rendering.

139
00:12:42,750 --> 00:12:49,590
Quindi, alla fine, ciò che dobbiamo fare è rimuovere il bind qui, rimuoverlo qui in tutti questi

140
00:12:49,590 --> 00:12:51,550
punti perché questo romperà

141
00:12:51,780 --> 00:12:56,980
la nostra app, causerà troppi cicli di rendering a causa dell'uso della callback

142
00:12:57,210 --> 00:13:01,200
che non ha effetto e invece potremmo desidera inoltrare un

143
00:13:01,200 --> 00:13:05,850
ID prop del titolo e così via al nostro componente di input.

144
00:13:06,050 --> 00:13:14,200
Quindi aggiungiamo questo su tutti questi input, questo prop ID è sostanzialmente quello che ho aggiunto prima nella chiamata di bind, quindi

145
00:13:14,260 --> 00:13:18,860
lo inoltriamo al componente di input in modo che possiamo usarlo lì,

146
00:13:18,880 --> 00:13:23,430
facciamolo per tutti questi input qui e ora come possiamo usarlo?

147
00:13:23,470 --> 00:13:27,910
Bene all'interno dell'input, ora abbiamo questo ID prop disponibile proprio,

148
00:13:27,910 --> 00:13:30,820
quindi lì possiamo semplicemente collegarlo.

149
00:13:30,880 --> 00:13:38,280
Quindi qui possiamo inoltrare oggetti di scena. id o semplicemente ID in modo che non dobbiamo aggiungere oggetti di

150
00:13:38,280 --> 00:13:44,370
scena qui e invece estrarre l'ID dagli oggetti di scena qui proprio come abbiamo fatto con la modifica dell'input e

151
00:13:44,470 --> 00:13:50,470
aggiungere l'ID come dipendenza di questo effetto in seguito. E ora con ciò, inoltriamo ancora l'identificatore

152
00:13:50,830 --> 00:13:55,630
di questo input ma in un modo più elegante che evita l'uso del

153
00:13:55,630 --> 00:13:59,000
bind che alla fine ricrea questa funzione per ogni

154
00:13:59,140 --> 00:14:03,430
ciclo di rendering e quindi porta a un ciclo infinito e quindi

155
00:14:06,890 --> 00:14:15,490
ora se ricarichiamo questo e noi vai alla sezione admin qui, ora posso inserire qualcosa qui e anche qui e ora funziona perché ora

156
00:14:15,490 --> 00:14:19,660
evitiamo questo ciclo di rendering infinito e otteniamo la convalida come volevamo.

157
00:14:19,690 --> 00:14:26,170
Quindi ora questo è il mio approccio o questo è l'approccio che volevo mostrarti qui, che puoi usare per avere

158
00:14:26,170 --> 00:14:31,630
un componente di input riutilizzabile che fa la propria validazione, che puoi configurare dall'esterno e dove

159
00:14:31,630 --> 00:14:33,960
puoi ancora gestire il modulo generale.

160
00:14:34,060 --> 00:14:36,120
Detto questo, immergiamoci in alcuni dettagli,

161
00:14:36,220 --> 00:14:42,070
come ad esempio lo stile di questo messaggio di errore che stiamo visualizzando, questo messaggio di errore di convalida e anche

162
00:14:42,070 --> 00:14:45,310
il controllo quando lo visualizziamo perché non voglio mostrarlo tutto il tempo.