Ora dirò che avremo uno sguardo approfondito su come lavorare con l'input dell'utente e così via
in un modulo separato nel modulo del corso successivo, quindi non mi immergerò profondamente in questo momento.
L'unica cosa che voglio fare in questo momento è aggiungere un input di testo qui alla schermata di modifica del
prodotto e quindi generare un paio di input di testo qui che ci consentono di recuperare l'input dell'utente e, alla fine,
ci consentono di aggiungere o modificare il prodotto senza alcun validazione o qualcosa di speciale lì dentro.
Quindi importerò anche una vista di scorrimento perché inizierò avvolgendo tutto con una vista di scorrimento
perché potresti sicuramente vederlo su un piccolo dispositivo o in modalità
orizzontale dove non tutto si adatta a una schermata. Ora lì, avremo un paio di viste con i diversi input di testo, quindi
qui avremo sempre un testo con un'etichetta, come il titolo del prodotto che dovresti inserire e, al di sotto,
un input di testo che consente di inserire questo titolo e alla fine, lo ripeterò per tutte le diverse cose che
vuoi aggiungere.
Ora sarà richiesto
un po 'di stile, quindi qui per l'inserimento del testo, aggiungerò uno stile di
input e sul testo sopra quello, aggiungerò uno stile di
etichetta di stili, puoi anche dare a questa vista uno stile generale di forma controllo per
esempio, qualunque cosa tu voglia nominarlo e ora possiamo ripeterlo per il titolo, per imageUrl qui, per il prezzo e anche
ultimo ma non meno importante, per la descrizione. Compilerò anche queste cose in generale in un'altra
vista, quindi alla fine tutti questi controlli di forma daranno uno stile di forma agli stili.
Ora è il momento di lavorare su
questi stili qui, quindi laggiù nel foglio di stile, per il modulo imposterò un margine di 20 in tutte le
direzioni, quindi c'è una spaziatura attorno a questi input. Per i miei input qui, per l'etichetta e
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
il testo stesso e il controllo del modulo , Voglio impostare una larghezza di 100 per assicurarmi che
sia il più ampia possibile. Per l'etichetta, imposterò la
famiglia di caratteri per aprire sans grassetto per avere del testo in grassetto qui e quindi
un margine verticale di 8 per avere una spaziatura in alto e in basso e
per l'input stesso che è questo
elemento di input di testo, voglio avere un'imbottitura orizzontale di due, quindi un'imbottitura molto piccola in
modo che quando inseriamo il testo, non siamo direttamente sul bordo dell'input e un'imbottitura verticale di 5, quindi una
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
uno e questo è lo stile con cui andrò per ora. Ora, se lo guardiamo andando su admin e poi ad esempio aggiungendone uno nuovo,
ecco come appare, non sembra troppo male, certamente non configurato in
alcun modo ma alcuni con cui iniziare e ovviamente ora voglio essere
in grado di inviare questo e salvare anche questo.
Per questo nella
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
piace averlo proprio accanto al componente, lo farò aggiungi le opzioni di navigazione dove ho bisogno di quella sintassi
dinamica perché avremo bisogno di fare qualcosa di dinamico dall'intestazione e poi qui, restituiamo quell'oggetto di configurazione
dove per uno, puoi impostare il titolo dell'intestazione e che dovrebbe anche essere dinamico perché lì
, Desidero generare se stiamo modificando o aggiungendo, ciò dipenderà dal fatto che abbiamo un parametro ID prodotto
o meno, quindi possiamo già accedere a navData. navigazione. getParam.
Ora, se dai un'occhiata alla schermata del prodotto utente, noterai che quando
facciamo clic sul pulsante Modifica, passiamo qui il parametro ID prodotto per modificare la navigazione del prodotto, quando abbiamo fatto clic sull'icona Aggiungi
nell'intestazione
, non lo passiamo.
Quindi il parametro ID prodotto, se disponibile, sappiamo che siamo in modalità modifica.
Quindi qui posso verificare se possiamo ottenere un valore per questo e se questo è vero,
quindi mostro il prodotto di modifica
come titolo, altrimenti mostrerò aggiungi prodotto perché questo è un chiaro indicatore per me se stiamo modificando o aggiungendo.
Il titolo dell'intestazione non è tutto ciò che dovrebbe far
parte della configurazione, voglio
anche avere quella parte destra dell'intestazione per avere un pulsante che mi permetta di salvare i miei
dati e, per quello, andrò alla schermata dei prodotti dell'utente e copierò questa configurazione
ho lì con i pulsanti di intestazione, copiarlo nella schermata di modifica del prodotto e, naturalmente, quindi copiare anche sulle importazioni
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
un po 'perché sicuramente un pulsante Aggiungi non ha senso qui, il salvataggio sembra essere
un'etichetta più appropriata e l'icona che voglio usare quindi è il segno di spunta md e il segno di spunta iOS
che rende una bella icona del segno di spunta. Naturalmente qui, anche io non voglio navigare per modificare
il prodotto ma invece, voglio inviare il mio modulo e questo è qualcosa su cui lavoreremo in un secondo.
Innanzitutto, dobbiamo assicurarci di poter salvare tutti gli input dell'utente e
di prepopolare questo modulo in caso di modifica. Quindi per salvare l'input dell'utente, possiamo usare l'hook di stato di React e
gestire semplicemente lo stato per ciascuno di questi
input di testo, quindi avremo quattro stati qui alla fine con
state use, ognuno inizializzato inizialmente su una stringa vuota e poi abbiamo il titolo e impostare il titolo
e ripetere che fondamentalmente per avere anche come imageUrl e impostare imageUrl e quindi qui, avere il prezzo e impostare il prezzo e
quindi qui
anche avere la descrizione e impostare la descrizione e di nuovo, perfezioneremo questo nel modulo successivo in cui ci immergiamo
più a fondo nella gestione dell'input dell'utente.
Per ora, lo legherò solo al mio input di testo, il valore qui è legato al titolo per questo primo che è
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
aggiornare il mio stato del titolo con il testo del titolo appena inserito. E ora è questo modello che aggiungiamo a tutti
questi input di testo qui, qui ovviamente
per il secondo stiamo parlando di imageUrl e impostiamo imageUrl ma a parte questo,
è lo stesso. Per il prezzo, non
sorprende che passiamo indietro nel prezzo e chiamiamo prezzo fisso ma a parte questo, è lo stesso.
Si prega di notare che il prezzo quindi ovviamente è anche gestito come
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
descrizione.
Con ciò, i dati vengono gestiti, ora per prepopolare che quando abbiamo una ricetta, quando stiamo caricando un prodotto e siamo
in modalità di modifica, dobbiamo solo ottenere il nostro ID prodotto con l'aiuto della navigazione degli oggetti di scena ottenere param, lì ,
l'ID prodotto è un parametro che possiamo correggere per recuperare e se è impostato l'ID prod, allora so che siamo in
modalità di modifica e ovviamente voglio prepopolare i miei campi qui con i valori.
Ora, in realtà, ciò significa che voglio caricare il mio prodotto in base all'ID prod dal mio stato Redux.
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
puoi sempre controllare il tuo riduttore se non sei sicuro
di come sia stato strutturato di nuovo e lì, vediamo nella parte prodotti del
nostro riduttore, del nostro negozio Redux, dovrei dire, alla fine abbiamo quell'array di prodotti
utente, quindi è quello che mi interessa qui, raggiungo i prodotti
degli utenti e
ora voglio trovare il prodotto con quell'ID prod. Quindi qui, darò un'occhiata a ogni prodotto,
la funzione find fa questo per me e voglio tornare vero se l'ID del
prodotto che sto guardando è uguale all'ID prod che ho recuperato dai miei parametri.
Ora ovviamente a volte questo non produrrà nulla se l'ID prod non è impostato
perché questo parametro non è impostato, come sempre quando abbiamo fatto clic su questo pulsante Aggiungi, quindi questo parametro
non verrà mai impostato ma va bene. Quindi il prodotto modificato sarà semplicemente indefinito, il che va benissimo. Altrimenti se il prodotto modificato
non è indefinito, se impostato quindi, sappiamo che siamo in modalità di
modifica e quindi possiamo prepopolare i nostri valori. Quindi effettivamente lo farò prima di inizializzare il mio stato perché
è qualcosa che voglio inizializzare a seconda che abbiamo caricato un prodotto o meno.
Quindi il titolo qui, in realtà lì controllerò se il prodotto modificato, se è impostato, se
è impostato, quindi inizializzerò il titolo da modificareProdotto. titolo, altrimenti sarà una
stringa vuota e avrò la stessa logica per imageUrl qui.
Quindi qui lo faccio per imageUrl, non per il prezzo perché il prezzo non dovrebbe essere modificabile ma
lo farò per la descrizione.
Quindi il valore predefinito di titolo, imageUrl e descrizione dipende dal
fatto che abbiamo un prodotto modificato o meno. E ora, dato che lo impostiamo sullo stato, questo verrà
automaticamente inserito nei nostri input di testo e l'unica cosa è che, devo essere in grado
di rimuovere l'input del prezzo qui se siamo in modalità di modifica. Quindi controllerò se il prodotto modificato è impostato qui e se
è così, quindi restituirò null
qui e solo altrimenti
se non è impostato, quindi se sono in modalità Aggiungi, non in modalità Modifica, renderò che input di prezzo qui, in modo che
l'input di prezzo venga rimosso se lo stiamo modificando perché non posso modificarlo comunque.
Quindi ora con questo, proviamo questo e torniamo alla schermata di amministrazione. Se faccio clic su Aggiungi, sì, devo aggiungere nuovamente l'importazione
della piattaforma perché la sto usando nel pulsante dell'intestazione per visualizzare il segno di spunta,
le icone a seconda della piattaforma.
Quindi assicuriamoci di importare la piattaforma nella schermata di modifica del prodotto, ma ora se faccio clic su Aggiungi,
vediamo tutte e quattro le importazioni, tutte vuote all'inizio. Se clicco su Modifica invece, sono prepopolati e
non vedo il prezzo inserito che è esattamente quello che voglio.
Ora è il momento di assicurarci che quando inviamo questo, aggiorniamo il nostro
prodotto se lo stiamo modificando o se lo stiamo aggiungendo, stiamo aggiungendo un nuovo prodotto.
Ora di nuovo, per ora non aggiungerò alcuna convalida, lo faremo più tardi.
Quindi per ora possiamo anche inviare un prodotto vuoto, in seguito dopo il prossimo modulo,
questo non sarà più possibile.