In quale altro modo possiamo ottimizzare questo?
Bene, potresti notare che questo codice jsx qui alla fine può essere ripetuto più volte, ogni input
ha questo aspetto.
Abbiamo una vista, abbiamo un'etichetta con lo stesso input di testo e potremmo anche volere un testo di errore
che possiamo visualizzare.
Quindi avrebbe senso esternalizzare questo in un componente separato ed
è esattamente quello che voglio fare.
Andrò nella mia cartella dei componenti e lì nella cartella dell'interfaccia utente, aggiungerò un input. file js che conterrà un componente React, quindi importerò reagire
da un reagire ovviamente e quindi importerò un paio di cose da React Native e queste cose alla
fine sono la mia vista, il componente di testo, il componente di input di testo e il foglio di stile perché
io ' Ne avrò bisogno anche da React Native e con quello qui, possiamo creare qui il componente di input che ottiene oggetti di scena e
deve restituire un po 'di jsx. Avremo un oggetto styles con Stylesheet. creare e, naturalmente,
alla fine, esportiamo questo come predefinito qui, questo componente.
Ora, se torniamo alla schermata di modifica del prodotto, possiamo tagliare questo codice jsx del titolo, quindi la vista circostante, il testo, l'inserimento di testo e
questa parte del messaggio di errore, tagliarlo da qui, fuori dalla schermata di
modifica del prodotto e spostare che nella schermata di input e lì, usalo come valore di ritorno nel componente di input qui.
Ora, ovviamente, dovremo aggiustarlo un po ', ma quello è il nostro scheletro generale che voglio usare
lì.
Ora anche dalla schermata di modifica del prodotto, prenderò lo
stile, lì questa etichetta di controllo del modulo e lo stile di input possono essere tutti
rimossi e dovrebbero essere spostati nel componente di input e lì nel foglio di stile.
Quindi ora con quello ovviamente, questo può essere usato solo per un titolo e voglio creare
un componente di input che può essere usato per qualsiasi input, che per esempio significa che l'etichetta qui deve essere dinamica,
quindi mi aspetto di ottenerlo su un'etichetta chiamata forse.
Inoltre, in generale, voglio assicurarmi che l'input di testo possa essere configurato dall'esterno, quindi
inoltrerò tutti gli oggetti di scena che ottengo sul mio componente di input qui all'input di testo, in modo che su questo componente
di input, saremo in grado di impostare cose come il tipo di tastiera perché non voglio codificare
questo
qui, invece dovrebbe essere un wrapper riutilizzabile attorno al componente di input di testo che può
essere configurato dall'esterno.
Quindi queste impostazioni qui, per esempio, le taglierò da qui in modo da poterle impostare dall'esterno, mi libererò anche di
questi ascoltatori perché non ne abbiamo davvero bisogno.
Il testo dell'errore qui dovrebbe anche essere settabile dall'esterno, quindi controllerò qui il testo dell'errore
dei puntelli e ovviamente
puoi sempre dare a questi oggetti tutti i nomi che desideri,
ovviamente dovremo anche cambiare ciò che assegniamo qui come valore e così via,
anche questo cambierà.
Ma ora possiamo già iniziare a utilizzare
quell'input qui, andiamo alla schermata di modifica del prodotto e lì, andrò semplicemente in alto e importerò l'input dalla cartella dei componenti ovviamente e lì dalla cartella dell'interfaccia utente e lì
dall'input e quindi noi posso iniziare a utilizzare il componente di
input nel luogo in cui in precedenza avevo il mio componente di input di
testo qui.
Quindi, aggiungerò solo input e ora su input, possiamo aggiungere l'impostazione che ho tagliato, come il tipo di tastiera
e così via perché verrà inoltrato.
Possiamo impostare la nostra etichetta del titolo, come il titolo e anche il nostro possibile testo di errore come Inserisci un titolo valido, anche se non
è tutto ciò che faremo per la convalida, ma è un inizio.
Questo è il modo in cui possiamo quindi
utilizzare questo input e, naturalmente, questo è anche il modo in cui ora possiamo usarlo per sostituire gli altri input.
Quindi, per esempio qui, imageUrl, qui ho impostato questo su imageUrl, Per favore, inserisci un imageUrl valido forse, il tipo di tastiera predefinito
è ok, la correzione automatica con maiuscole / minuscole non è richiesta, restituisci il tipo di chiave dopo
possiamo
lasciarlo, non lo stiamo facendo qualsiasi cosa con esso, potremmo aggiungere un
po 'di logica ma non lo sto facendo qui. Per il prezzo lascerò il rendering condizionale ma qui, posso
aggiungere il mio input qui, impostarlo su price per favore inserisci un prezzo valido, il tipo di tastiera qui dovrebbe ovviamente non essere predefinito ma pad decimale,
non ho bisogno di maiuscole automatiche o correzione automatica, quindi eliminiamolo. E per la descrizione qui, aggiungerò anche il
mio input qui, descrizione, inserisci una descrizione valida, il tipo di tastiera può essere predefinito, posso usare la maiuscola automatica,
la correzione automatica, tuttavia non imposterò un tipo di tasto di ritorno ma qui
Voglio impostare multilinea proprio come questo che consente la modifica multilinea e impostare il numero di righe per
dire tre.
Questo però viene utilizzato solo da Android ma lì, limiterà il numero di linee che è
possibile inserire, su iOS, questo non avrà alcun effetto ma è così che ora puoi utilizzare questo componente
di input e comunque configurarlo dall'esterno.
Detto questo, dato che non abbiamo
ancora finito, per quanto riguarda il valore e questo listener di modifica del testo?
Esistono diversi modi per gestire questo input di testo o i valori di testo qui.
Potresti comunque semplicemente inoltrarlo al componente genitore e utilizzare solo questo componente di input come wrapper visivo, ma
lo porterò
un po 'oltre e voglio gestire questo valore e la validità di questo singolo input all'interno del componente di input,
in modo che Quindi riferisco solo al
mio componente genitore, quindi alla schermata di modifica del prodotto alla fine qual è il valore corrente e se è valido
o meno in modo che la convalida non
debba avvenire all'interno del componente genitore, ma di nuovo è totalmente attivo
a te che tu voglia farlo o no. Qui aggiungerò una nuova costante nel componente
di input, gestore di modifica del testo dove ottengo questo immetti testo perché ora è quello che rilevo o che è
già associato e lo terrò generalmente così, anche se qui non abbiamo bisogno dell'identificatore
inoltre, non è necessario eseguire
il bind, pertanto poiché si trova all'interno di un singolo input, non è necessario un
identificatore lì.
Questo ora si attiverà quindi ad ogni sequenza di tasti
e quindi ora qui, voglio verificare se questo è valido o meno e gestire anche il mio valore di quell'input. Ora, per quello, possiamo usare di nuovo un riduttore o singoli stati gestiti con
stato d'uso o creati con stato d'uso ma andrò per un riduttore e qui
ho il mio riduttore
di input, il nome dipende da te, ottiene lo stato, ottiene un azione e restituisce un nuovo stato alla
fine.
Quindi qui nell'input, posso chiamare il riduttore di utilizzo e inoltrarlo o impostarlo sul riduttore di input e il mio stato iniziale
per questo input qui sarà un semplice oggetto Javascript con tre valori. Il valore che hai attualmente, che inizialmente può essere vuoto
ma in realtà voglio permettermi di impostare un valore iniziale dall'esterno perché ne avremo bisogno, ad
esempio quando stiamo modificando i prodotti, quindi
controllo se è impostato il valore iniziale degli oggetti di scena
, ancora una volta questo
è ovviamente un nome che puoi scegliere come
vuoi e, in tal caso, lo
imposterò
sul valore iniziale degli oggetti di scena, altrimenti mi
imposterò per impostarlo su una stringa vuota, quindi riuscirò anche se questo è valido o meno e di nuovo posso verificare se i puntelli inizialmente validi
diciamo che è impostato.
In tal caso, prenderò automaticamente quel valore che dovrebbe essere
vero o falso, in caso contrario,
questo verrà automaticamente trattato come falso e gestirò
anche se è stato ancora toccato o meno, quindi se l'utente ha effettivamente digitato qui e questo
può essere utile per aiutarci a fornire una migliore
esperienza utente per quanto riguarda quando mostriamo errori di convalida e qui lo imposterò inizialmente su false.
Ora, naturalmente, questo ci restituirà l'istantanea dello stato di input e una funzione di invio che
qui posso anche nominare invio perché non avremo alcun scontro di nomi e nel gestore di
modifica del testo, ovviamente invierò un'azione, un'azione che quindi creeremo qui con un identificatore di azione, ad esempio un
cambiamento di input, che dovrebbe essere spedito qui, digitare il cambio di input
e quindi qui nel riduttore, possiamo aggiungere un'istruzione switch per mescolare le cose, controllare il tipo di azione e per il cambio
di input del caso , vogliamo fare qualcosa. Nel caso predefinito, restituirò il mio
stato, quindi non farò altro che qui, ovviamente, voglio fare qualcos'altro.
Ora qui nel gestore di modifica del testo, ovviamente invio la modifica di input e voglio inoltrare
il valore che ho
archiviato in una chiave di valore, ma ora qui, voglio anche fare una convalida specifica dell'input e inoltrare le informazioni
se l'input è valido o meno . E per questo, in allegato
trovi alcune impostazioni di convalida o un codice di convalida che ora ti guiderò.
Qui ho una costante che imposta un'espressione regolare e-mail, quindi un'espressione regolare che ci consente di convalidare
gli indirizzi e-mail, non abbiamo
ancora inserito l'indirizzo e-mail ma più tardi quando aggiungeremo l'autenticazione, avremo quella e quindi voglio essere in
grado per utilizzare questo componente di input,
quindi questo componente deve essere preparato per convalidare anche le e-mail.
Quindi ho la variabile helper valida qui perché poi abbiamo un sacco di controlli qui.
Ora voglio assicurarmi di poter impostare i criteri che vogliamo usare dall'esterno con l'aiuto di oggetti di scena, quindi per esempio controllo se un oggetto
di scena richiesto è impostato, se è impostato su vero, quindi se è impostato a tutti e
se questo è il caso, quindi verrà eseguito questo controllo. Se l'elica richiesta non è impostata, questo controllo non
verrà eseguito e quindi questa convalida non viene eseguita e questo è il caso di
tutte le mie diverse convalide qui.
Quindi possiamo impostare un puntello richiesto per verificare se non è vuoto, se è vuoto, abbiamo impostato è valido su falso.
Possiamo impostare un oggetto di posta elettronica sul componente di input per convalidarlo come indirizzo di posta elettronica valido e,
in caso contrario, impostarlo su false.
Possiamo verificare che un numero sia troppo piccolo o troppo grande o una stringa per essere troppo breve
con
il validatore della lunghezza minima e, naturalmente, potresti aggiungere più logica qui, possibilmente anche con
un pacchetto come ValidateJs che ho già menzionato in precedenza. Ora con quello, avrò valido alla fine, che è vero per
impostazione predefinita, ma falso non appena una convalida fallisce e quindi ora, possiamo aggiungere è valido anche per questa azione
inviata.