Ora con questa azione inviata, possiamo andare al riduttore e scrivere un po 'di codice qui in cambio di input e questo
è un codice molto semplice.
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
azione, l'altra è isValid e questa è l'altra cosa che voglio anche aggiornare ad
ogni sequenza di tasti, isValid per questo input, non per l'intero
modulo ma per questo input gestito internamente. Non aggiornerò toccato qui, invece toccato dovrebbe essere aggiornato quando in
realtà perdiamo il focus perché ciò significa che l'utente ha finito di inserire il contenuto
per il momento, quindi ora voglio contrassegnarlo come toccato e possibilmente mostrare errori di convalida. Quindi qui, il gestore della messa a fuoco persa
è una funzione che aggiungo e lì, invierò
un'azione. Ora, creerò
un identificatore di azione qui, input
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
con un altro caso, input sfocato e, in tal caso, restituisco un nuovo stato in cui copio il vecchio
stato perché voglio mantenere il valore ed è valido e non modificarlo,
ma voglio impostare toccato su vero, quindi non appena quando sfociamo un input, viene trattato come toccato.
Ora dobbiamo solo collegare questa funzione, quindi imposterò qui l'ascoltatore onBlur e indicherò il gestore della messa a fuoco persa in modo
che questo si inneschi quando questo input sfoca.
Ora è tutto a posto e questo gestirà lo stato all'interno di questo input, ovviamente devo
comunque inoltrare il valore e le informazioni, sia che l'input sia valido o
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
input
e magari aggiungerlo qui e nella funzione effect use, voglio chiamare una funzione che mi aspetto di ottenere tramite oggetti di scena, magari
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
modo che nel componente padre, possiamo aggiungere qui una funzione che ascolta quella alla fine, che viene attivata,
che riceve questi due argomenti e quindi nel genitore, quindi nel componente dello
schermo, possiamo aggiornare il nostro stato lì. Ora la cosa importante è quando questo effetto dovrebbe essere
eseguito e non dovrebbe essere eseguito dopo ogni sequenza di tasti? Invece, questo dovrebbe essere eseguito ogni volta che
il nostro valore dello stato di input o è naturalmente valido, poiché è ciò da cui dipendiamo o per essere precisi, potremmo anche inviare
queste informazioni solo se lo stato di input toccato è vero perché altrimenti il componente genitore potrebbe non interessarsene.
Quindi ora la nostra dipendenza qui è l'intero stato di input perché usiamo tutti i valori ma continueremo ad attivare
questa funzione sul componente genitore solo se toccato è vero, quindi questo effetto verrà eseguito più spesso
ma la maggior parte delle volte non farà nulla fintanto che il tocco non è vero e gli oggetti di scena
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
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
abbiamo bisogno laggiù e ora possiamo aggiungere che questa è una dipendenza e le altre cose, altri cambiamenti negli
oggetti di scena non lo innescano.
Quindi ora lo chiamiamo sul componente padre ogni volta che viene toccato e quindi inoltriamo il valore e la
validità di questo input al componente padre.
Quindi ora usiamolo nella schermata di modifica del prodotto, lì sui nostri input come sull'input del titolo, possiamo aggiungere il prop di
modifica dell'input on e questo è il prop che ho scelto come target qui, quindi è necessario ottenere quel nome giusto
e questo si aspetta di ottenere una funzione come valore che a sua volta riceverà
due argomenti quando viene chiamato: il valore e la validità di quell'input.
Quindi qui voglio puntare a una funzione e questo può essere il nostro, diciamo, gestore del cambio di input, possiamo
riciclarlo, lo rinomino per essere più adatto.
Quindi il gestore del cambiamento di input può essere attivato qui, in questo modo, lì voglio ancora passare il mio identificatore perché
voglio riutilizzarlo per tutti i miei input e ora dal momento che sono nel
componente dello schermo, avremo più input e lì , quindi otteniamo il nostro identificatore e quindi otteniamo il valore e le informazioni
sono valide, giusto?
Quindi valore di input e validità di input, questo è ciò che otteniamo, giusto, perché è
quello che inoltriamo dall'interno del componente di input qui, questo
è ciò che passiamo a
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
input e questo accadrà solo quando l'input viene toccato a proposito, quindi quando perde lo stato attivo e ovviamente questa è solo
una
limitazione che ho aggiunto
qui, che devi aver perso lo stato, tu ovviamente potrebbe anche andare al componente
di input e rimuoverlo se si seleziona per aggiornare la validità e il valore nel componente
parent per ogni input, per ogni sequenza di tasti. Ora un'altra cosa che voglio fare, voglio racchiuderla in
una chiamata di callback di uso qui, in modo che questa funzione non venga ricostruita inutilmente perché tieni presente che abbiamo passato questa funzione
su al cambio di input nel componente di input e lì d'altra parte, questa è una
dipendenza
di questo effetto, quindi questo
effetto si ripeterà ogni volta che questo cambia.
Quindi non dovrebbe cambiare troppo spesso per evitare inutili esecuzioni di effetti e qui
dobbiamo quindi dichiarare le nostre dipendenze e l'unica dipendenza che abbiamo è lo stato del modulo di spedizione che
in realtà non cambierà mai, quindi siamo bravi,
questo
non dovrebbe mai ricostruire perché il la logica lì dentro
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
solo questo qui perché devo inviarlo in un secondo momento e perché devo derivare la validità complessiva del modulo. Non lo faccio perché
devo gestire ogni input qui,
lo facciamo invece dall'interno del componente input. Per l'invio e così via,
abbiamo
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
e se questo dovrebbe essere inizialmente
valido, quindi se torno alla schermata di modifica del prodotto, ora dovremmo impostare il valore iniziale su che cosa?
Bene, possiamo verificare se abbiamo un prodotto modificato e se lo facciamo, allora il valore iniziale qui dovrebbe
essere modificatoProdotto. titolo,
altrimenti è una stringa vuota e questo dovrebbe essere inizialmente valido, quindi usa questo prop qui
se abbiamo un prodotto
modificato, quindi se è
così, con il doppio botto qui, se questo è vero. Se non abbiamo prodotti modificati, allora questo non può essere inizialmente valido,
quindi
passo falso, il che è
positivo, ed è proprio quello che dovrebbe essere il caso.
Ora possiamo copiare queste due righe, anche su imageUrl, ovviamente inoltriamo il valore dell'URL dell'immagine
come valore predefinito, a parte questo, può rimanere così. Per il prezzo, non avremo mai un valore iniziale
e non sarà mai inizialmente valido. Per la descrizione d'altra parte, possiamo
ancora aggiungere questo e qui puntare alla descrizione.
Ora con ciò, c'è una cosa che devo correggere nel componente di input a cui ho anche pensato, ovviamente
qui, lo stato del modulo non è più disponibile, invece qui abbiamo
il nostro stato interno e ho chiamato questo stato di input, ovvero cosa
restituisce il mio riduttore, quindi
dovremmo usarlo qui ovviamente.
Quindi qui abbiamo inputState. valore come valore, è semplice come
quello e qui abbiamo inputState. isValid come controllo e dovrebbe essere tutto.
Ora se lo salviamo e diamo un'occhiata a questo, vediamo se funziona. Se andiamo qui, inizialmente abbiamo tutti i messaggi di
errore che hanno senso perché inizialmente sono tutti non
validi, se comincio a digitare qui, ricevo un errore, non riesco a trovare la variabile isValid nel mio componente
di input, che deve essere in quell'handler che spara ad ogni pressione del tasto, probabilmente qui, sì nel riduttore
ovviamente dovrei controllare l'azione.
isValid, non solo isValid,
devo ottenerlo dall'azione. Quindi, con quella correzione qui,
torniamo indietro e proviamo di nuovo. Se comincio a digitare, questo viene
cancellato, se lo ripristino, il mio errore non ritorna, quindi è un
piccolo errore che dovremo correggere. Per il prezzo, 0 non
viene quindi considerato valido, uno anche non lo è, quindi la
convalida ha alcuni problemi ma l'immissione e così
via funziona, ma vediamo ora cosa c'è che non va nella convalida.
Beh, ovviamente il modo in cui funziona la validazione, non la stiamo usando.
Tieni presente che controllo sempre se questo tipo di convalida è abilitato per questo input o questo tipo o questo tipo e lo facciamo con
l'aiuto di questi speciali oggetti di scena che dobbiamo impostare. Al momento non è abilitata
alcuna convalida, quindi vengono presi in considerazione solo i valori non validi predefiniti.
Quindi, se vado alla schermata di modifica del prodotto, ora abilitiamo questa speciale convalida impostando i
puntelli giusti, ad esempio qui sull'input del titolo, richiesto. Su imageUrl, anche richiesto. Sul prezzo qui, richiesto e forse anche
min uguale a zero, quindi zero è il numero minimo che dobbiamo inserire o un numero
maggiore
di quello in realtà, quindi forse 0. 1 è il nostro numero minimo. Per la descrizione, dovrebbe anche essere richiesto e forse anche una
lunghezza minima pari a 5, per avere almeno 5 caratteri. C'è anche un'altra cosa che dobbiamo fare qui nella schermata
di modifica del prodotto, questo sul gestore di modifica dell'input qui deve anche essere aggiunto a ogni
input ovviamente, non solo all'input del titolo. Quindi dobbiamo aggiungere questo per
imageUrl, altrimenti avremo un errore in seguito, dovremo aggiungerlo qui all'input del prezzo, dovremo anche aggiungerlo qui ovviamente all'input della
descrizione e sostituire l'identificatore nella giusta direzione.
Quindi proviamo questo e noterai qualcosa di strano,
se scrivi qui, che funziona, se scrivi
imageUrl, non funziona bene,
la validazione non si aggiorna e non puoi tornare indietro, almeno questo potrebbe essere bloccato.
Quindi, se ricarichiamo questo con errore di comando o premendo due volte R su Android e diamo un
altro tentativo qui, diciamo sul prezzo che noterai che funziona ma perché non funziona
e lo stesso sarebbe il caso a proposito se l'hai provato
su imageUrl, qui funziona. Perché funziona se in precedenza ho modificato un altro
input perché ora, ad esempio, non funziona più su un titolo? E il problema è legato al fatto che questo è bloccato qui.
Stiamo rilanciando questo componente troppo spesso e la ragione di ciò è davvero difficile da rintracciare.
Alla fine, abbiamo una specie di ciclo infinito qui
e il problema è il nostro gestore del cambiamento di input.
Stiamo usando il callback qui per evitare attività ricreative non necessarie, ma legandolo in questo modo, rendiamo questo
obsoleto, non fa alcuna differenza ora perché ciò creerà una nuova funzione di associazione per ogni
ciclo di rendering.
Quindi, alla fine, ciò che dobbiamo fare è rimuovere il bind qui, rimuoverlo qui in tutti questi
punti perché questo romperà
la nostra app, causerà troppi cicli di rendering a causa dell'uso della callback
che non ha effetto e invece potremmo desidera inoltrare un
ID prop del titolo e così via al nostro componente di input.
Quindi aggiungiamo questo su tutti questi input, questo prop ID è sostanzialmente quello che ho aggiunto prima nella chiamata di bind, quindi
lo inoltriamo al componente di input in modo che possiamo usarlo lì,
facciamolo per tutti questi input qui e ora come possiamo usarlo?
Bene all'interno dell'input, ora abbiamo questo ID prop disponibile proprio,
quindi lì possiamo semplicemente collegarlo.
Quindi qui possiamo inoltrare oggetti di scena. id o semplicemente ID in modo che non dobbiamo aggiungere oggetti di
scena qui e invece estrarre l'ID dagli oggetti di scena qui proprio come abbiamo fatto con la modifica dell'input e
aggiungere l'ID come dipendenza di questo effetto in seguito. E ora con ciò, inoltriamo ancora l'identificatore
di questo input ma in un modo più elegante che evita l'uso del
bind che alla fine ricrea questa funzione per ogni
ciclo di rendering e quindi porta a un ciclo infinito e quindi
ora se ricarichiamo questo e noi vai alla sezione admin qui, ora posso inserire qualcosa qui e anche qui e ora funziona perché ora
evitiamo questo ciclo di rendering infinito e otteniamo la convalida come volevamo.
Quindi ora questo è il mio approccio o questo è l'approccio che volevo mostrarti qui, che puoi usare per avere
un componente di input riutilizzabile che fa la propria validazione, che puoi configurare dall'esterno e dove
puoi ancora gestire il modulo generale.
Detto questo, immergiamoci in alcuni dettagli,
come ad esempio lo stile di questo messaggio di errore che stiamo visualizzando, questo messaggio di errore di convalida e anche
il controllo quando lo visualizziamo perché non voglio mostrarlo tutto il tempo.