1 00:00:02,530 --> 00:00:05,110 In quale altro modo possiamo ottimizzare questo? 2 00:00:05,110 --> 00:00:11,350 Bene, potresti notare che questo codice jsx qui alla fine può essere ripetuto più volte, ogni input 3 00:00:11,360 --> 00:00:12,590 ha questo aspetto. 4 00:00:12,640 --> 00:00:18,130 Abbiamo una vista, abbiamo un'etichetta con lo stesso input di testo e potremmo anche volere un testo di errore 5 00:00:18,130 --> 00:00:19,140 che possiamo visualizzare. 6 00:00:19,270 --> 00:00:22,900 Quindi avrebbe senso esternalizzare questo in un componente separato ed 7 00:00:22,990 --> 00:00:25,370 è esattamente quello che voglio fare. 8 00:00:25,480 --> 00:00:32,230 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 9 00:00:32,230 --> 00:00:38,410 da un reagire ovviamente e quindi importerò un paio di cose da React Native e queste cose alla 10 00:00:38,410 --> 00:00:45,460 fine sono la mia vista, il componente di testo, il componente di input di testo e il foglio di stile perché 11 00:00:45,460 --> 00:00:54,210 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 12 00:00:54,210 --> 00:01:01,410 deve restituire un po 'di jsx. Avremo un oggetto styles con Stylesheet. creare e, naturalmente, 13 00:01:02,780 --> 00:01:08,230 alla fine, esportiamo questo come predefinito qui, questo componente. 14 00:01:08,340 --> 00:01:18,420 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 15 00:01:18,440 --> 00:01:23,890 questa parte del messaggio di errore, tagliarlo da qui, fuori dalla schermata di 16 00:01:24,250 --> 00:01:32,700 modifica del prodotto e spostare che nella schermata di input e lì, usalo come valore di ritorno nel componente di input qui. 17 00:01:32,740 --> 00:01:37,210 Ora, ovviamente, dovremo aggiustarlo un po ', ma quello è il nostro scheletro generale che voglio usare 18 00:01:37,210 --> 00:01:37,720 lì. 19 00:01:37,960 --> 00:01:42,720 Ora anche dalla schermata di modifica del prodotto, prenderò lo 20 00:01:42,770 --> 00:01:49,270 stile, lì questa etichetta di controllo del modulo e lo stile di input possono essere tutti 21 00:01:49,270 --> 00:01:55,440 rimossi e dovrebbero essere spostati nel componente di input e lì nel foglio di stile. 22 00:01:55,460 --> 00:02:00,740 Quindi ora con quello ovviamente, questo può essere usato solo per un titolo e voglio creare 23 00:02:00,740 --> 00:02:07,580 un componente di input che può essere usato per qualsiasi input, che per esempio significa che l'etichetta qui deve essere dinamica, 24 00:02:07,710 --> 00:02:10,830 quindi mi aspetto di ottenerlo su un'etichetta chiamata forse. 25 00:02:13,740 --> 00:02:18,420 Inoltre, in generale, voglio assicurarmi che l'input di testo possa essere configurato dall'esterno, quindi 26 00:02:18,420 --> 00:02:25,800 inoltrerò tutti gli oggetti di scena che ottengo sul mio componente di input qui all'input di testo, in modo che su questo componente 27 00:02:25,800 --> 00:02:31,060 di input, saremo in grado di impostare cose come il tipo di tastiera perché non voglio codificare 28 00:02:31,070 --> 00:02:31,570 questo 29 00:02:31,570 --> 00:02:36,720 qui, invece dovrebbe essere un wrapper riutilizzabile attorno al componente di input di testo che può 30 00:02:36,720 --> 00:02:37,570 essere configurato dall'esterno. 31 00:02:37,800 --> 00:02:43,990 Quindi queste impostazioni qui, per esempio, le taglierò da qui in modo da poterle impostare dall'esterno, mi libererò anche di 32 00:02:44,010 --> 00:02:46,530 questi ascoltatori perché non ne abbiamo davvero bisogno. 33 00:02:52,130 --> 00:02:57,230 Il testo dell'errore qui dovrebbe anche essere settabile dall'esterno, quindi controllerò qui il testo dell'errore 34 00:02:57,230 --> 00:02:58,640 dei puntelli e ovviamente 35 00:02:58,640 --> 00:03:02,720 puoi sempre dare a questi oggetti tutti i nomi che desideri, 36 00:03:02,720 --> 00:03:07,570 ovviamente dovremo anche cambiare ciò che assegniamo qui come valore e così via, 37 00:03:07,570 --> 00:03:08,800 anche questo cambierà. 38 00:03:09,350 --> 00:03:11,720 Ma ora possiamo già iniziare a utilizzare 39 00:03:11,720 --> 00:03:23,200 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ì 40 00:03:23,200 --> 00:03:27,210 dall'input e quindi noi posso iniziare a utilizzare il componente di 41 00:03:27,550 --> 00:03:32,770 input nel luogo in cui in precedenza avevo il mio componente di input di 42 00:03:32,770 --> 00:03:33,910 testo qui. 43 00:03:34,000 --> 00:03:40,510 Quindi, aggiungerò solo input e ora su input, possiamo aggiungere l'impostazione che ho tagliato, come il tipo di tastiera 44 00:03:40,510 --> 00:03:43,000 e così via perché verrà inoltrato. 45 00:03:43,180 --> 00:03:50,950 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 46 00:03:51,550 --> 00:03:55,470 è tutto ciò che faremo per la convalida, ma è un inizio. 47 00:03:55,510 --> 00:03:57,250 Questo è il modo in cui possiamo quindi 48 00:03:59,130 --> 00:04:02,970 utilizzare questo input e, naturalmente, questo è anche il modo in cui ora possiamo usarlo per sostituire gli altri input. 49 00:04:02,970 --> 00:04:11,400 Quindi, per esempio qui, imageUrl, qui ho impostato questo su imageUrl, Per favore, inserisci un imageUrl valido forse, il tipo di tastiera predefinito 50 00:04:11,400 --> 00:04:17,910 è ok, la correzione automatica con maiuscole / minuscole non è richiesta, restituisci il tipo di chiave dopo 51 00:04:17,910 --> 00:04:18,480 possiamo 52 00:04:18,480 --> 00:04:23,070 lasciarlo, non lo stiamo facendo qualsiasi cosa con esso, potremmo aggiungere un 53 00:04:23,070 --> 00:04:29,990 po 'di logica ma non lo sto facendo qui. Per il prezzo lascerò il rendering condizionale ma qui, posso 54 00:04:33,510 --> 00:04:42,300 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, 55 00:04:42,330 --> 00:04:49,380 non ho bisogno di maiuscole automatiche o correzione automatica, quindi eliminiamolo. E per la descrizione qui, aggiungerò anche il 56 00:04:49,380 --> 00:04:58,740 mio input qui, descrizione, inserisci una descrizione valida, il tipo di tastiera può essere predefinito, posso usare la maiuscola automatica, 57 00:04:58,980 --> 00:05:05,700 la correzione automatica, tuttavia non imposterò un tipo di tasto di ritorno ma qui 58 00:05:05,700 --> 00:05:14,330 Voglio impostare multilinea proprio come questo che consente la modifica multilinea e impostare il numero di righe per 59 00:05:14,330 --> 00:05:15,830 dire tre. 60 00:05:15,830 --> 00:05:20,630 Questo però viene utilizzato solo da Android ma lì, limiterà il numero di linee che è 61 00:05:20,630 --> 00:05:25,580 possibile inserire, su iOS, questo non avrà alcun effetto ma è così che ora puoi utilizzare questo componente 62 00:05:25,580 --> 00:05:27,470 di input e comunque configurarlo dall'esterno. 63 00:05:27,470 --> 00:05:30,240 Detto questo, dato che non abbiamo 64 00:05:30,260 --> 00:05:35,710 ancora finito, per quanto riguarda il valore e questo listener di modifica del testo? 65 00:05:35,840 --> 00:05:42,030 Esistono diversi modi per gestire questo input di testo o i valori di testo qui. 66 00:05:42,050 --> 00:05:47,960 Potresti comunque semplicemente inoltrarlo al componente genitore e utilizzare solo questo componente di input come wrapper visivo, ma 67 00:05:48,080 --> 00:05:49,020 lo porterò 68 00:05:49,310 --> 00:05:55,850 un po 'oltre e voglio gestire questo valore e la validità di questo singolo input all'interno del componente di input, 69 00:05:56,180 --> 00:05:58,460 in modo che Quindi riferisco solo al 70 00:05:58,460 --> 00:06:05,280 mio componente genitore, quindi alla schermata di modifica del prodotto alla fine qual è il valore corrente e se è valido 71 00:06:05,280 --> 00:06:07,900 o meno in modo che la convalida non 72 00:06:07,940 --> 00:06:11,980 debba avvenire all'interno del componente genitore, ma di nuovo è totalmente attivo 73 00:06:12,170 --> 00:06:17,480 a te che tu voglia farlo o no. Qui aggiungerò una nuova costante nel componente 74 00:06:17,480 --> 00:06:25,520 di input, gestore di modifica del testo dove ottengo questo immetti testo perché ora è quello che rilevo o che è 75 00:06:25,550 --> 00:06:31,400 già associato e lo terrò generalmente così, anche se qui non abbiamo bisogno dell'identificatore 76 00:06:31,400 --> 00:06:33,380 inoltre, non è necessario eseguire 77 00:06:33,620 --> 00:06:39,560 il bind, pertanto poiché si trova all'interno di un singolo input, non è necessario un 78 00:06:39,560 --> 00:06:40,810 identificatore lì. 79 00:06:40,880 --> 00:06:44,150 Questo ora si attiverà quindi ad ogni sequenza di tasti 80 00:06:44,150 --> 00:06:56,140 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 81 00:06:56,140 --> 00:07:02,270 stato d'uso o creati con stato d'uso ma andrò per un riduttore e qui 82 00:07:02,300 --> 00:07:03,920 ho il mio riduttore 83 00:07:04,090 --> 00:07:12,300 di input, il nome dipende da te, ottiene lo stato, ottiene un azione e restituisce un nuovo stato alla 84 00:07:12,300 --> 00:07:13,110 fine. 85 00:07:13,440 --> 00:07:20,390 Quindi qui nell'input, posso chiamare il riduttore di utilizzo e inoltrarlo o impostarlo sul riduttore di input e il mio stato iniziale 86 00:07:20,550 --> 00:07:28,200 per questo input qui sarà un semplice oggetto Javascript con tre valori. Il valore che hai attualmente, che inizialmente può essere vuoto 87 00:07:28,260 --> 00:07:34,470 ma in realtà voglio permettermi di impostare un valore iniziale dall'esterno perché ne avremo bisogno, ad 88 00:07:34,470 --> 00:07:37,230 esempio quando stiamo modificando i prodotti, quindi 89 00:07:37,260 --> 00:07:41,570 controllo se è impostato il valore iniziale degli oggetti di scena 90 00:07:41,610 --> 00:07:43,700 , ancora una volta questo 91 00:07:43,700 --> 00:07:46,980 è ovviamente un nome che puoi scegliere come 92 00:07:46,980 --> 00:07:49,220 vuoi e, in tal caso, lo 93 00:07:49,230 --> 00:07:50,040 imposterò 94 00:07:50,130 --> 00:07:53,460 sul valore iniziale degli oggetti di scena, altrimenti mi 95 00:07:53,460 --> 00:08:03,600 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 96 00:08:03,630 --> 00:08:05,160 diciamo che è impostato. 97 00:08:05,160 --> 00:08:08,780 In tal caso, prenderò automaticamente quel valore che dovrebbe essere 98 00:08:08,790 --> 00:08:11,750 vero o falso, in caso contrario, 99 00:08:13,420 --> 00:08:16,440 questo verrà automaticamente trattato come falso e gestirò 100 00:08:16,450 --> 00:08:23,170 anche se è stato ancora toccato o meno, quindi se l'utente ha effettivamente digitato qui e questo 101 00:08:23,260 --> 00:08:26,850 può essere utile per aiutarci a fornire una migliore 102 00:08:27,100 --> 00:08:33,760 esperienza utente per quanto riguarda quando mostriamo errori di convalida e qui lo imposterò inizialmente su false. 103 00:08:33,780 --> 00:08:40,260 Ora, naturalmente, questo ci restituirà l'istantanea dello stato di input e una funzione di invio che 104 00:08:40,260 --> 00:08:46,920 qui posso anche nominare invio perché non avremo alcun scontro di nomi e nel gestore di 105 00:08:46,920 --> 00:08:54,420 modifica del testo, ovviamente invierò un'azione, un'azione che quindi creeremo qui con un identificatore di azione, ad esempio un 106 00:08:54,420 --> 00:09:00,040 cambiamento di input, che dovrebbe essere spedito qui, digitare il cambio di input 107 00:09:00,040 --> 00:09:08,930 e quindi qui nel riduttore, possiamo aggiungere un'istruzione switch per mescolare le cose, controllare il tipo di azione e per il cambio 108 00:09:08,960 --> 00:09:16,150 di input del caso , vogliamo fare qualcosa. Nel caso predefinito, restituirò il mio 109 00:09:16,190 --> 00:09:22,400 stato, quindi non farò altro che qui, ovviamente, voglio fare qualcos'altro. 110 00:09:22,630 --> 00:09:27,730 Ora qui nel gestore di modifica del testo, ovviamente invio la modifica di input e voglio inoltrare 111 00:09:27,760 --> 00:09:29,320 il valore che ho 112 00:09:29,410 --> 00:09:35,320 archiviato in una chiave di valore, ma ora qui, voglio anche fare una convalida specifica dell'input e inoltrare le informazioni 113 00:09:35,350 --> 00:09:39,550 se l'input è valido o meno . E per questo, in allegato 114 00:09:39,570 --> 00:09:45,040 trovi alcune impostazioni di convalida o un codice di convalida che ora ti guiderò. 115 00:09:45,210 --> 00:09:50,760 Qui ho una costante che imposta un'espressione regolare e-mail, quindi un'espressione regolare che ci consente di convalidare 116 00:09:50,760 --> 00:09:52,710 gli indirizzi e-mail, non abbiamo 117 00:09:52,710 --> 00:09:58,290 ancora inserito l'indirizzo e-mail ma più tardi quando aggiungeremo l'autenticazione, avremo quella e quindi voglio essere in 118 00:09:58,290 --> 00:10:00,670 grado per utilizzare questo componente di input, 119 00:10:00,780 --> 00:10:04,580 quindi questo componente deve essere preparato per convalidare anche le e-mail. 120 00:10:04,740 --> 00:10:10,140 Quindi ho la variabile helper valida qui perché poi abbiamo un sacco di controlli qui. 121 00:10:10,140 --> 00:10:16,610 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 122 00:10:16,620 --> 00:10:21,030 di scena richiesto è impostato, se è impostato su vero, quindi se è impostato a tutti e 123 00:10:21,030 --> 00:10:26,610 se questo è il caso, quindi verrà eseguito questo controllo. Se l'elica richiesta non è impostata, questo controllo non 124 00:10:26,610 --> 00:10:31,620 verrà eseguito e quindi questa convalida non viene eseguita e questo è il caso di 125 00:10:31,620 --> 00:10:33,870 tutte le mie diverse convalide qui. 126 00:10:34,080 --> 00:10:40,180 Quindi possiamo impostare un puntello richiesto per verificare se non è vuoto, se è vuoto, abbiamo impostato è valido su falso. 127 00:10:40,440 --> 00:10:46,140 Possiamo impostare un oggetto di posta elettronica sul componente di input per convalidarlo come indirizzo di posta elettronica valido e, 128 00:10:46,320 --> 00:10:48,330 in caso contrario, impostarlo su false. 129 00:10:48,450 --> 00:10:55,260 Possiamo verificare che un numero sia troppo piccolo o troppo grande o una stringa per essere troppo breve 130 00:10:55,260 --> 00:10:56,070 con 131 00:10:56,070 --> 00:11:01,950 il validatore della lunghezza minima e, naturalmente, potresti aggiungere più logica qui, possibilmente anche con 132 00:11:01,950 --> 00:11:09,800 un pacchetto come ValidateJs che ho già menzionato in precedenza. Ora con quello, avrò valido alla fine, che è vero per 133 00:11:09,940 --> 00:11:16,520 impostazione predefinita, ma falso non appena una convalida fallisce e quindi ora, possiamo aggiungere è valido anche per questa azione 134 00:11:16,520 --> 00:11:17,060 inviata.