1
00:00:02,270 --> 00:00:07,790
Ora dirò che avremo uno sguardo approfondito su come lavorare con l'input dell'utente e così via

2
00:00:07,790 --> 00:00:13,530
in un modulo separato nel modulo del corso successivo, quindi non mi immergerò profondamente in questo momento.

3
00:00:13,640 --> 00:00:19,460
L'unica cosa che voglio fare in questo momento è aggiungere un input di testo qui alla schermata di modifica del

4
00:00:19,460 --> 00:00:25,730
prodotto e quindi generare un paio di input di testo qui che ci consentono di recuperare l'input dell'utente e, alla fine,

5
00:00:25,730 --> 00:00:31,010
ci consentono di aggiungere o modificare il prodotto senza alcun validazione o qualcosa di speciale lì dentro.

6
00:00:31,010 --> 00:00:37,900
Quindi importerò anche una vista di scorrimento perché inizierò avvolgendo tutto con una vista di scorrimento

7
00:00:37,940 --> 00:00:43,160
perché potresti sicuramente vederlo su un piccolo dispositivo o in modalità

8
00:00:43,160 --> 00:00:52,000
orizzontale dove non tutto si adatta a una schermata. Ora lì, avremo un paio di viste con i diversi input di testo, quindi

9
00:00:52,000 --> 00:00:57,640
qui avremo sempre un testo con un'etichetta, come il titolo del prodotto che dovresti inserire e, al di sotto,

10
00:00:57,640 --> 00:01:03,700
un input di testo che consente di inserire questo titolo e alla fine, lo ripeterò per tutte le diverse cose che

11
00:01:03,850 --> 00:01:04,500
vuoi aggiungere.

12
00:01:05,460 --> 00:01:07,170
Ora sarà richiesto

13
00:01:07,170 --> 00:01:14,220
un po 'di stile, quindi qui per l'inserimento del testo, aggiungerò uno stile di

14
00:01:15,000 --> 00:01:20,310
input e sul testo sopra quello, aggiungerò uno stile di

15
00:01:20,440 --> 00:01:28,250
etichetta di stili, puoi anche dare a questa vista uno stile generale di forma controllo per

16
00:01:28,390 --> 00:01:38,710
esempio, qualunque cosa tu voglia nominarlo e ora possiamo ripeterlo per il titolo, per imageUrl qui, per il prezzo e anche

17
00:01:38,800 --> 00:01:47,470
ultimo ma non meno importante, per la descrizione. Compilerò anche queste cose in generale in un'altra

18
00:01:47,460 --> 00:01:55,000
vista, quindi alla fine tutti questi controlli di forma daranno uno stile di forma agli stili.

19
00:01:57,490 --> 00:02:00,370
Ora è il momento di lavorare su

20
00:02:00,400 --> 00:02:07,490
questi stili qui, quindi laggiù nel foglio di stile, per il modulo imposterò un margine di 20 in tutte le

21
00:02:07,490 --> 00:02:13,690
direzioni, quindi c'è una spaziatura attorno a questi input. Per i miei input qui, per l'etichetta e

22
00:02:13,690 --> 00:02:22,800
l'input del controllo del modulo, voglio anche aggiungere alcuni stili, quindi qui avrò il controllo del modulo, la mia etichetta e quindi anche l'input stesso, quindi

23
00:02:22,810 --> 00:02:29,270
il testo stesso e il controllo del modulo , Voglio impostare una larghezza di 100 per assicurarmi che

24
00:02:29,270 --> 00:02:33,390
sia il più ampia possibile. Per l'etichetta, imposterò la

25
00:02:33,430 --> 00:02:39,450
famiglia di caratteri per aprire sans grassetto per avere del testo in grassetto qui e quindi

26
00:02:39,450 --> 00:02:45,090
un margine verticale di 8 per avere una spaziatura in alto e in basso e

27
00:02:45,510 --> 00:02:47,580
per l'input stesso che è questo

28
00:02:47,580 --> 00:02:53,580
elemento di input di testo, voglio avere un'imbottitura orizzontale di due, quindi un'imbottitura molto piccola in

29
00:02:53,580 --> 00:03:00,800
modo che quando inseriamo il testo, non siamo direttamente sul bordo dell'input e un'imbottitura verticale di 5, quindi una

30
00:03:00,810 --> 00:03:12,900
piccola imbottitura in alto e in basso e un bordo in basso colore di questo leggero aspetto grigiastro con questo codice esadecimale di ccc e poi una larghezza inferiore del bordo di

31
00:03:12,900 --> 00:03:21,630
uno e questo è lo stile con cui andrò per ora. Ora, se lo guardiamo andando su admin e poi ad esempio aggiungendone uno nuovo,

32
00:03:21,660 --> 00:03:25,340
ecco come appare, non sembra troppo male, certamente non configurato in

33
00:03:25,380 --> 00:03:29,450
alcun modo ma alcuni con cui iniziare e ovviamente ora voglio essere

34
00:03:30,000 --> 00:03:33,220
in grado di inviare questo e salvare anche questo.

35
00:03:33,420 --> 00:03:34,960
Per questo nella

36
00:03:34,990 --> 00:03:44,160
schermata di modifica del prodotto, voglio avere un pulsante di azione, quindi un pulsante nell'intestazione, quindi qui prima forse gli stili, l'ordine non importa ma mi

37
00:03:44,220 --> 00:03:50,730
piace averlo proprio accanto al componente, lo farò aggiungi le opzioni di navigazione dove ho bisogno di quella sintassi

38
00:03:50,730 --> 00:03:56,910
dinamica perché avremo bisogno di fare qualcosa di dinamico dall'intestazione e poi qui, restituiamo quell'oggetto di configurazione

39
00:03:56,910 --> 00:04:02,670
dove per uno, puoi impostare il titolo dell'intestazione e che dovrebbe anche essere dinamico perché lì

40
00:04:02,670 --> 00:04:09,090
, Desidero generare se stiamo modificando o aggiungendo, ciò dipenderà dal fatto che abbiamo un parametro ID prodotto

41
00:04:09,090 --> 00:04:17,490
o meno, quindi possiamo già accedere a navData. navigazione. getParam.

42
00:04:17,490 --> 00:04:23,010
Ora, se dai un'occhiata alla schermata del prodotto utente, noterai che quando

43
00:04:23,370 --> 00:04:33,630
facciamo clic sul pulsante Modifica, passiamo qui il parametro ID prodotto per modificare la navigazione del prodotto, quando abbiamo fatto clic sull'icona Aggiungi

44
00:04:33,630 --> 00:04:34,190
nell'intestazione

45
00:04:34,200 --> 00:04:36,150
, non lo passiamo.

46
00:04:36,480 --> 00:04:41,420
Quindi il parametro ID prodotto, se disponibile, sappiamo che siamo in modalità modifica.

47
00:04:41,550 --> 00:04:46,410
Quindi qui posso verificare se possiamo ottenere un valore per questo e se questo è vero,

48
00:04:46,410 --> 00:04:48,640
quindi mostro il prodotto di modifica

49
00:04:48,650 --> 00:04:54,390
come titolo, altrimenti mostrerò aggiungi prodotto perché questo è un chiaro indicatore per me se stiamo modificando o aggiungendo.

50
00:04:55,350 --> 00:04:59,050
Il titolo dell'intestazione non è tutto ciò che dovrebbe far

51
00:04:59,220 --> 00:05:01,260
parte della configurazione, voglio

52
00:05:01,260 --> 00:05:07,140
anche avere quella parte destra dell'intestazione per avere un pulsante che mi permetta di salvare i miei

53
00:05:07,170 --> 00:05:12,140
dati e, per quello, andrò alla schermata dei prodotti dell'utente e copierò questa configurazione

54
00:05:12,330 --> 00:05:19,740
ho lì con i pulsanti di intestazione, copiarlo nella schermata di modifica del prodotto e, naturalmente, quindi copiare anche sulle importazioni

55
00:05:19,740 --> 00:05:29,850
di pulsante di intestazione e pulsanti di intestazione e elemento sopra per modificare la schermata del prodotto e aggiungere questo qui e ora ovviamente, noi Ho bisogno di modificarlo

56
00:05:29,850 --> 00:05:35,280
un po 'perché sicuramente un pulsante Aggiungi non ha senso qui, il salvataggio sembra essere

57
00:05:35,280 --> 00:05:42,570
un'etichetta più appropriata e l'icona che voglio usare quindi è il segno di spunta md e il segno di spunta iOS

58
00:05:42,600 --> 00:05:49,220
che rende una bella icona del segno di spunta. Naturalmente qui, anche io non voglio navigare per modificare

59
00:05:49,250 --> 00:05:55,470
il prodotto ma invece, voglio inviare il mio modulo e questo è qualcosa su cui lavoreremo in un secondo.

60
00:05:55,490 --> 00:06:01,250
Innanzitutto, dobbiamo assicurarci di poter salvare tutti gli input dell'utente e

61
00:06:01,250 --> 00:06:11,520
di prepopolare questo modulo in caso di modifica. Quindi per salvare l'input dell'utente, possiamo usare l'hook di stato di React e

62
00:06:11,520 --> 00:06:14,810
gestire semplicemente lo stato per ciascuno di questi

63
00:06:15,000 --> 00:06:19,560
input di testo, quindi avremo quattro stati qui alla fine con

64
00:06:19,620 --> 00:06:26,920
state use, ognuno inizializzato inizialmente su una stringa vuota e poi abbiamo il titolo e impostare il titolo

65
00:06:26,920 --> 00:06:36,190
e ripetere che fondamentalmente per avere anche come imageUrl e impostare imageUrl e quindi qui, avere il prezzo e impostare il prezzo e

66
00:06:36,580 --> 00:06:37,990
quindi qui

67
00:06:38,140 --> 00:06:46,390
anche avere la descrizione e impostare la descrizione e di nuovo, perfezioneremo questo nel modulo successivo in cui ci immergiamo

68
00:06:46,390 --> 00:06:49,340
più a fondo nella gestione dell'input dell'utente.

69
00:06:49,360 --> 00:06:55,210
Per ora, lo legherò solo al mio input di testo, il valore qui è legato al titolo per questo primo che è

70
00:06:55,210 --> 00:07:04,090
il mio input di titolo e al cambio testo qui, ottengo qui il mio testo che è cambiato e lo salverò di nuovo in impostare il titolo in questo caso qui, in modo da

71
00:07:04,350 --> 00:07:11,920
aggiornare il mio stato del titolo con il testo del titolo appena inserito. E ora è questo modello che aggiungiamo a tutti

72
00:07:11,920 --> 00:07:15,550
questi input di testo qui, qui ovviamente

73
00:07:15,730 --> 00:07:22,270
per il secondo stiamo parlando di imageUrl e impostiamo imageUrl ma a parte questo,

74
00:07:22,270 --> 00:07:25,390
è lo stesso. Per il prezzo, non

75
00:07:25,390 --> 00:07:31,700
sorprende che passiamo indietro nel prezzo e chiamiamo prezzo fisso ma a parte questo, è lo stesso.

76
00:07:31,720 --> 00:07:36,550
Si prega di notare che il prezzo quindi ovviamente è anche gestito come

77
00:07:36,550 --> 00:07:45,880
una stringa qui perché qualunque cosa l'utente inserisca sempre il testo e qui per l'inserimento del testo, passerò la mia descrizione e inserirò qui la mia

78
00:07:45,880 --> 00:07:46,340
descrizione.

79
00:07:47,980 --> 00:07:57,550
Con ciò, i dati vengono gestiti, ora per prepopolare che quando abbiamo una ricetta, quando stiamo caricando un prodotto e siamo

80
00:07:57,550 --> 00:08:07,590
in modalità di modifica, dobbiamo solo ottenere il nostro ID prodotto con l'aiuto della navigazione degli oggetti di scena ottenere param, lì ,

81
00:08:08,010 --> 00:08:17,250
l'ID prodotto è un parametro che possiamo correggere per recuperare e se è impostato l'ID prod, allora so che siamo in

82
00:08:17,250 --> 00:08:24,060
modalità di modifica e ovviamente voglio prepopolare i miei campi qui con i valori.

83
00:08:24,190 --> 00:08:31,870
Ora, in realtà, ciò significa che voglio caricare il mio prodotto in base all'ID prod dal mio stato Redux.

84
00:08:31,870 --> 00:08:47,340
Quindi importiamo il selettore di utilizzo da React Redux qui e ora qui, possiamo ottenere il nostro prodotto modificato raggiungendo il selettore di utilizzo nel nostro stato Redux e ora qui, ovviamente, dobbiamo immergerci nella nostra sezione di prodotto e

85
00:08:47,340 --> 00:08:51,170
puoi sempre controllare il tuo riduttore se non sei sicuro

86
00:08:51,210 --> 00:08:56,640
di come sia stato strutturato di nuovo e lì, vediamo nella parte prodotti del

87
00:08:56,640 --> 00:09:01,740
nostro riduttore, del nostro negozio Redux, dovrei dire, alla fine abbiamo quell'array di prodotti

88
00:09:01,800 --> 00:09:06,180
utente, quindi è quello che mi interessa qui, raggiungo i prodotti

89
00:09:06,270 --> 00:09:07,820
degli utenti e

90
00:09:07,850 --> 00:09:13,870
ora voglio trovare il prodotto con quell'ID prod. Quindi qui, darò un'occhiata a ogni prodotto,

91
00:09:13,870 --> 00:09:19,060
la funzione find fa questo per me e voglio tornare vero se l'ID del

92
00:09:19,060 --> 00:09:24,330
prodotto che sto guardando è uguale all'ID prod che ho recuperato dai miei parametri.

93
00:09:24,730 --> 00:09:29,710
Ora ovviamente a volte questo non produrrà nulla se l'ID prod non è impostato

94
00:09:29,710 --> 00:09:36,370
perché questo parametro non è impostato, come sempre quando abbiamo fatto clic su questo pulsante Aggiungi, quindi questo parametro

95
00:09:36,370 --> 00:09:44,620
non verrà mai impostato ma va bene. Quindi il prodotto modificato sarà semplicemente indefinito, il che va benissimo. Altrimenti se il prodotto modificato

96
00:09:44,620 --> 00:09:50,470
non è indefinito, se impostato quindi, sappiamo che siamo in modalità di

97
00:09:50,470 --> 00:09:58,210
modifica e quindi possiamo prepopolare i nostri valori. Quindi effettivamente lo farò prima di inizializzare il mio stato perché

98
00:09:58,230 --> 00:10:03,120
è qualcosa che voglio inizializzare a seconda che abbiamo caricato un prodotto o meno.

99
00:10:04,320 --> 00:10:09,750
Quindi il titolo qui, in realtà lì controllerò se il prodotto modificato, se è impostato, se

100
00:10:09,750 --> 00:10:15,720
è impostato, quindi inizializzerò il titolo da modificareProdotto. titolo, altrimenti sarà una

101
00:10:15,720 --> 00:10:21,560
stringa vuota e avrò la stessa logica per imageUrl qui.

102
00:10:21,600 --> 00:10:28,980
Quindi qui lo faccio per imageUrl, non per il prezzo perché il prezzo non dovrebbe essere modificabile ma

103
00:10:29,070 --> 00:10:31,250
lo farò per la descrizione.

104
00:10:32,200 --> 00:10:36,520
Quindi il valore predefinito di titolo, imageUrl e descrizione dipende dal

105
00:10:36,520 --> 00:10:43,870
fatto che abbiamo un prodotto modificato o meno. E ora, dato che lo impostiamo sullo stato, questo verrà

106
00:10:43,870 --> 00:10:48,910
automaticamente inserito nei nostri input di testo e l'unica cosa è che, devo essere in grado

107
00:10:48,910 --> 00:10:56,490
di rimuovere l'input del prezzo qui se siamo in modalità di modifica. Quindi controllerò se il prodotto modificato è impostato qui e se

108
00:10:56,490 --> 00:10:58,180
è così, quindi restituirò null

109
00:10:58,200 --> 00:10:59,820
qui e solo altrimenti

110
00:10:59,820 --> 00:11:07,380
se non è impostato, quindi se sono in modalità Aggiungi, non in modalità Modifica, renderò che input di prezzo qui, in modo che

111
00:11:07,380 --> 00:11:12,300
l'input di prezzo venga rimosso se lo stiamo modificando perché non posso modificarlo comunque.

112
00:11:12,400 --> 00:11:20,910
Quindi ora con questo, proviamo questo e torniamo alla schermata di amministrazione. Se faccio clic su Aggiungi, sì, devo aggiungere nuovamente l'importazione

113
00:11:21,020 --> 00:11:26,990
della piattaforma perché la sto usando nel pulsante dell'intestazione per visualizzare il segno di spunta,

114
00:11:27,040 --> 00:11:29,950
le icone a seconda della piattaforma.

115
00:11:30,050 --> 00:11:35,150
Quindi assicuriamoci di importare la piattaforma nella schermata di modifica del prodotto, ma ora se faccio clic su Aggiungi,

116
00:11:35,150 --> 00:11:40,670
vediamo tutte e quattro le importazioni, tutte vuote all'inizio. Se clicco su Modifica invece, sono prepopolati e

117
00:11:40,670 --> 00:11:43,840
non vedo il prezzo inserito che è esattamente quello che voglio.

118
00:11:43,880 --> 00:11:48,280
Ora è il momento di assicurarci che quando inviamo questo, aggiorniamo il nostro

119
00:11:48,290 --> 00:11:52,770
prodotto se lo stiamo modificando o se lo stiamo aggiungendo, stiamo aggiungendo un nuovo prodotto.

120
00:11:52,820 --> 00:11:56,360
Ora di nuovo, per ora non aggiungerò alcuna convalida, lo faremo più tardi.

121
00:11:56,360 --> 00:12:00,860
Quindi per ora possiamo anche inviare un prodotto vuoto, in seguito dopo il prossimo modulo,

122
00:12:00,860 --> 00:12:02,450
questo non sarà più possibile.