Quindi continuiamo a lavorare su questo e cambiamo questo in una funzione del gestore di modifica
del testo, che
ora abbiamo assegnato al testo onChange qui sul titolo, ma che possiamo anche aggiungere al nostro imageUrl.
Quindi qui per il testo onChange, ho anche impostato questo per il gestore di modifica del testo e ora
per farlo funzionare, dobbiamo assicurarci che questa funzione ottenga informazioni su quale input è stato attivato,
quindi se hai appena digitato il titolo o nel input di imageUrl.
Quindi oltre a ottenere il testo, mi aspetto anche di ottenere un argomento diverso,
mi aspetto di ottenere il mio identificatore di input o qualcosa del genere, puoi nominarlo come vuoi in modo
che questa funzione possa essere riutilizzata per più input di testo e otteniamo ancora informazioni su quale
input ha innescato
ciò in modo che possiamo inoltrarlo al nostro riduttore, dove in seguito avremo bisogno di queste informazioni per aggiornare
correttamente il nostro stato.
Ora per ottenere questa funzionalità di identificatore di input, dobbiamo andare nei punti in cui utilizziamo il gestore
di modifica del testo e lì, ad esempio, possiamo usare bind o utilizzare una funzione di freccia anonima a capo invece di legare
questo dove non mi interessa ma altro soprattutto, per configurare gli argomenti che questa funzione otterrà
e c'è un argomento speciale che voglio passare e questo è l'identificatore di input.
E per questa funzione qui, per questa funzione chiamare questo
input di testo, questo ovviamente sarebbe il titolo. Per questo input laggiù, avremmo associato questo imageUrl e di
nuovo questo dovrebbe essere un identificatore che hai anche nel tuo stato lassù, nel
tuo stato di forma che passi al riduttore. Con questo aggiunto, ci assicureremo che il gestore di modifica del testo sia eseguito
e ottenga questo argomento dell'identificatore di input.
L'argomento di testo verrà anche ricevuto perché è l'argomento predefinito che React
Native ci passerebbe comunque e questo verrà automaticamente ricevuto come ultimo argomento in quella funzione.
Quindi non è necessario e in realtà non
possiamo vincolarlo qui, verrà inoltrato automaticamente.
Ora abbiamo una funzione riutilizzabile di modifica del testo qui e possiamo
assegnarla anche agli altri input, come qui a imageUrl, come qui per il prezzo, possiamo associare il gestore
di modifica del testo, associare questo e quindi il prezzo è il nostro identificatore qui
e ovviamente anche per la descrizione, lì incolliamo e poi ci leghiamo a questo e l'identificatore è la descrizione.
Ora questo stesso gestore può essere utilizzato per tutti gli input, ma in questo momento ovviamente
fa una cosa, convalida ogni input per la sua lunghezza.
Ora, ciò potrebbe avere senso e
lo fa qui, nessun input dovrebbe essere vuoto ma potresti volere anche
qualche altra convalida, per esempio il mio prezzo qui dovrebbe essere un numero maggiore di
zero diciamo, quindi zero non è consentito come input. Quello d'altra parte non è un criterio che per
me conta su altri input. Troveremo una soluzione elegante per questo in seguito, per
ora atteniamoci a questa più piccola convalida del denominatore comune che possiamo applicare a tutti gli input per assicurarci che non
siano almeno vuoti e concentriamoci sulla funzione
del riduttore e su come lo stato del nostro modulo dovrebbe cambiare quando
questo modulo inserisce un'azione di aggiornamento con tutti quei dati inviati perché in
questo momento non accadrà nulla.
Abbiamo il nostro stato iniziale sul riduttore lì e che sarà passato o memorizzato nello stato del
modulo ma questo stato non cambierà mai.
Bene, ecco perché inviamo un'azione, giusto?
Ecco perché lo facciamo qui,
ecco perché viene inviato l'aggiornamento dell'input del modulo ed è per questo che vogliamo scrivere del codice
qui nel riduttore quando questa azione ci raggiunge qui.
Ora lì, se questa azione ci raggiunge, alla fine l'obiettivo è quello di assicurarci di aggiornare questa istantanea di stato,
la
nostra istantanea di stato in modo appropriato.
Ciò significa che, ad esempio, avremo bisogno di alcuni valori aggiornati e per questo creo un nuovo oggetto
perché i miei valori
di input qui, quello è un oggetto e ne creerò uno nuovo per sostituirlo e prima di tutto
copierò quello esistente valori di input dello stato.
Tieni presente che lo stato qui viene passato automaticamente, questa è la nostra istantanea di stato corrente
prima di aggiornarla e quindi inizialmente, questa è questa istantanea di stato qui per esempio e questo avrà una
chiave di valori di input che a
sua volta contiene un
oggetto ed è proprio quello Sto copiando qui, sto copiando tutte le coppie chiave-valore di quell'istantanea dei valori di input e
quindi voglio sostituire la coppia di valori-chiave per l'input per cui è stata inviata
questa azione, la cosa buona è che alleghiamo l'input identificatore dell'azione. Quindi possiamo andare al riduttore e
sovrascrivere dinamicamente una chiave qui nei valori di input copiati,
la chiave è azione. input ovviamente, questo è il nostro identificatore di input che abbiamo allegato all'azione e
il valore dovrebbe essere action. valore, questo
è tutto ciò che dobbiamo fare. Quindi archiviamo dinamicamente il valore inviato con
l'input assegnato anche dinamicamente e aggiorniamo i nostri valori di input copiati.
Ora possiamo restituire un nuovo stato qui perché questo è l'obiettivo del tuo riduttore, come per il riduttore
Redux, alla fine deve restituire una nuova istantanea dello stato e lì voglio
copiare lo stato esistente ma sovrascrivere i valori di input con il valori aggiornati che copiano i miei vecchi valori in modo che
nessun dato vada perso e quindi sostituisca una delle coppie chiave-valore presenti. Ora, ovviamente, non è solo per sostituire
i valori o aggiornare i valori, voglio
anche aggiornare le mie validità.
Quindi ecco le mie validità aggiornate e proprio come con i valori, inizio copiando la mia
chiave di validità di input perché la validità di input è una
chiave
qui come puoi vedere e quindi voglio sostituire una validità per l'input che otteniamo sull'azione , quindi titolo, imageUrl o qualunque cosa
sia e sostituiamo questo con azione è valido perché otteniamo le informazioni se sono
valide o meno come parte dell'azione che viene inviata, giusto?
Lo stiamo inoltrando qui in base a questa convalida di base che abbiamo qui.
Ora con ciò, dobbiamo solo aggiornare questo qui, quindi le nostre
validità di input qui sono uguali alle validità aggiornate e ora dobbiamo solo gestire la
validità complessiva del modulo. Per questo, aggiungo
una variabile, una variabile di supporto, il modulo è valido che inizialmente è vero e poi cerco tutte
le mie validità aggiornate che
sono le mie vecchie validità
copiate e poi quella valida aggiornata per l'input che abbiamo appena digitato.
Quindi qui, abbiamo un ciclo for / in in cui passiamo attraverso tutte le chiavi nelle validità aggiornate e l'obiettivo è semplice, controllo
ogni validità di input del modulo e se tutte le validità di input del modulo sono valide, se sono
tutte vere, allora il totale il modulo è valido
Se almeno uno di essi è falso,
il modulo generale è falso, il modulo complessivo non è valido. Quindi, qui il modulo è valido è uguale all'ultimo modulo è lo stato
valido che abbiamo e quindi la validità di validità aggiornata per l'input che stiamo attualmente esaminando, quindi per questa chiave e stiamo
esaminando tutti gli input qui.
Il modo in cui funziona questo operatore booleano è che questo falso sovrascrive vero, quindi se qualsiasi input
è falso, la forma è valida sarà impostata su falsa e non potrà essere impostata su vera da quel momento in poi.
Quindi, se almeno un input non è valido, il modulo complessivo non sarà valido e
quindi ora non ho più bisogno di copiare il mio stato qui perché sostituirò
l'intera istantanea dello stato e il modulo impostato sarà
valido per il mio modulo derivato è valido qui e ovviamente per evitare confusione, potremmo anche nominare questo modulo aggiornato valido qui e qui e qui e
qui.
Ora solo un'altra cosa, se non riusciamo a farlo in
questo blocco, quindi se qualche altra azione è stata inviata o qualcos'altro, allora restituirò qui lo
stato invariato. Con ciò, abbiamo
aggiunto una logica di riduzione che è in grado di gestire qualsiasi input o qualsiasi digitazione in uno qualsiasi dei nostri input di testo, ora abbiamo
solo bisogno di usare lo stato del modulo che cambierà con ogni sequenza di tasti che
è proprio quello che è successo prima ma ora tutto centralizzato e fusa in uno stato gestito che ritengo sia molto
più pulito che avere tonnellate di stati diversi per validità e valori. A proposito, gestire tutti questi stati manualmente
e separatamente sarebbe diventato un grosso problema quando si desidera convalidare la validità complessiva del modulo.
Quindi ora possiamo usare lo stato del modulo che cambierà ad ogni sequenza di tasti e
lo useremo ad esempio qui sui valori. Ritorniamo al valore per questo input di testo accedendo ai valori di input dello stato del modulo. titolo.
Ora ovviamente, facciamo lo stesso qui per imageUrl, lo inseriamo di nuovo, quindi proprio quello che abbiamo fatto prima
e ora con il nostro stato del modulo gestito con
l'aiuto del riduttore, lo stesso per il prezzo ovviamente e lo stesso per il descrizione, così.
Ora oltre a cambiarlo qui, dobbiamo anche cambiarlo in altri posti, ad esempio qui
nel gestore di invio ovviamente. Lì, il titolo è valido, questo
non esiste più ma possiamo controllare il titolo di validità dell'input dello stato del modulo, che è vero o falso e se è falso, significa che non
è valido, quindi
questo controllo dovrebbe andare bene.
Naturalmente, tuttavia, ci preoccupiamo della validità di tutti gli input, quindi invece di controllarli tutti
manualmente concatenandoli in un'istruzione if lunga, possiamo semplicemente verificare se il modulo di stato del
modulo è valido è falso perché ciò significa che alcuni input sono falsi e quindi mostriamo
questo errore,
questo è il controllo più breve e questo è ovviamente anche quando vogliamo evitare che il modulo venga inviato.
Tuttavia, se il modulo viene inviato, la descrizione del titolo e imageUrl, che non esiste
più, è invece ora inputValues dello stato. titolo e così via, quindi
facciamo lo
stesso qui per la descrizione e per imageUrl. Deriviamo i nostri valori dallo stato della
forma, lo stesso ovviamente qui per la creazione. Otteniamo il titolo, la descrizione e imageUrl e ovviamente anche il prezzo che
ancora converto in un numero con il plus qui, otteniamo tutto ciò dal
nostro stato di forma dei valori di input. Pertanto, naturalmente, la nostra dipendenza qui non è titolo, descrizione, imageUrl
e così via, invece è solo lo stato del modulo. Se il modulo indica cambiamenti, cosa che farà ad ogni
sequenza di tasti, allora questa funzione dovrebbe essere ricostruita e deve essere ricostruita perché le
informazioni utilizzate dalla funzione
cambiano ad ogni sequenza di tasti, la
validità può cambiare ad ogni sequenza di tasti, i valori desiderati per inviare può cambiare ad ogni pressione di un tasto.
Naturalmente ora possiamo anche usarlo per mostrare il nostro messaggio di errore. Invece di verificare che il titolo
sia valido
e che non esiste più, controlliamo formState. inputValidities. titolo, se questo è falso, allora voglio mostrare questo testo.
Quindi ora con
ciò, se salviamo tutto ciò, dovremmo essere in grado di verificarlo. Se andiamo alla nostra pagina qui,
inizialmente vediamo questo errore.
Se comincio a digitare, scompare,
se provo a inviarlo, non riesce perché ho tre input vuoti.
Se invece inserisco qualcosa di valido
lì, invece, funziona. Se provo a modificare,
proviamo questo su Android forse per confondere le cose.
Quindi, se provo a modificare la maglietta rossa qui, posso inviarlo
bene, ora proviamo anche
a inviarlo se questo è vuoto, quindi ricevo l'avviso.
Quindi funziona nel modo in cui dovrebbe funzionare,
ora con questa gestione dei moduli più elegante che utilizza il riduttore di utilizzo e, naturalmente, non è possibile utilizzare solo il
riduttore quando si
lavora con i moduli, questo è solo un esempio particolarmente utile per quando ha senso fondersi più
stati insieme e quindi hanno un codice altamente riutilizzabile ed efficiente.
Ora non ho ancora finito, perché tutta questa ripetizione del codice con gli input qui che
sono sempre strutturati nello stesso modo e le possibilità di personalizzazione mancanti relative alla convalida, queste sono le cose
che voglio affrontare in seguito.