1
00:00:02,260 --> 00:00:07,540
Quindi, come detto, sono tornato al progetto a cui abbiamo lavorato e ovviamente ora la schermata

2
00:00:07,540 --> 00:00:09,640
di modifica del prodotto qui è

3
00:00:09,640 --> 00:00:16,060
ciò che mi interessa, questa è la schermata in cui ho questi input di testo qui con le mie etichette

4
00:00:16,060 --> 00:00:19,540
e quindi il input di testo, dove attualmente disponiamo di

5
00:00:19,540 --> 00:00:25,390
una gestione dell'input molto semplice, stiamo almeno recuperando l'input dell'utente e memorizzandolo con l'aiuto dello stato React, con

6
00:00:25,450 --> 00:00:26,460
l'hook dello

7
00:00:26,560 --> 00:00:30,200
stato use, stiamo quindi reinserendo i valori Android nell'input e basta.

8
00:00:30,310 --> 00:00:37,210
Questo ci consente di acquisire e utilizzare l'input dell'utente, ma per uno, possiamo migliorare il modo in cui lo facciamo,

9
00:00:37,210 --> 00:00:42,730
possiamo scriverlo in un modo più riutilizzabile e non stiamo facendo alcuna convalida di sorta, quindi

10
00:00:42,760 --> 00:00:46,510
queste sono le cose che voglio cambiare in questo modulo.

11
00:00:46,530 --> 00:00:50,850
Inoltre, non stiamo configurando i nostri input in alcun modo, ciò significa che in

12
00:00:50,940 --> 00:00:53,850
questo momento tutti gli input di testo sono uguali.

13
00:00:53,850 --> 00:00:57,140
Non cambiamo il tipo di tastiera che presentiamo,

14
00:00:57,270 --> 00:01:02,910
non offriamo input multilinea ad esempio per testi più lunghi come qui per la descrizione,

15
00:01:02,910 --> 00:01:08,370
nulla di tutto ciò sta accadendo e quindi iniziamo effettivamente con la configurazione di questi

16
00:01:08,370 --> 00:01:15,120
input prima di procedere alla convalida e così via. Una configurazione importante che è possibile aggiungere alle tastiere

17
00:01:15,180 --> 00:01:21,420
è il tipo di tastiera. Il tipo di tastiera prop può essere impostato e lì hai un paio di valori disponibili. Ora hai un bel po 'di

18
00:01:21,420 --> 00:01:26,970
valori qui, ma i documenti ufficiali sono anche un posto che dovresti consultare quando pensi al tipo che

19
00:01:26,970 --> 00:01:33,230
vuoi assegnare qui perché quando visiti la documentazione ufficiale di inserimento del testo, ovviamente vedi alcuni esempi ma poi vedi

20
00:01:33,230 --> 00:01:38,270
anche tutti gli oggetti di scena che hai e lì, puoi saperne di più su ogni

21
00:01:38,270 --> 00:01:41,450
oggetto e su come puoi configurarlo e, ad esempio, per

22
00:01:41,450 --> 00:01:46,010
il tipo di tastiera, abbiamo appreso che solo questi tipi sono supportati su più piattaforme.

23
00:01:46,160 --> 00:01:52,080
Pertanto, mentre abbiamo a disposizione specifici tipi di iOS e Android, questi tipi possono essere utilizzati solo insieme a un controllo

24
00:01:52,130 --> 00:01:53,750
della piattaforma in modo da assicurarti

25
00:01:53,750 --> 00:01:58,310
di non utilizzare il tipo su Android che non è supportato lì e che quindi non

26
00:01:58,310 --> 00:01:59,560
avrebbe alcun effetto.

27
00:02:00,230 --> 00:02:06,430
Quindi, mi atterrò ai tipi multipiattaforma, in modo da non dover aggiungere un ulteriore controllo della piattaforma e lì, in genere, diciamo

28
00:02:06,440 --> 00:02:11,600
testo normale, resteremmo ai valori predefiniti, che ovviamente è un tipo che non abbiamo dobbiamo assegnare, ma ad

29
00:02:11,600 --> 00:02:18,110
esempio ciò cambia quando diamo un'occhiata al nostro input di prezzo. Lì voglio assicurarmi che le persone inseriscano solo numeri validi,

30
00:02:18,110 --> 00:02:24,860
che non inseriscano alcun testo e quindi ovviamente voglio mostrare la tastiera giusta per aiutarli in questo e se diamo

31
00:02:24,860 --> 00:02:27,850
un'occhiata alla documentazione ufficiale, vediamo che ci sono tre

32
00:02:28,130 --> 00:02:33,170
principali tipi di tastiere multipiattaforma che possiamo mostrare: tastierino numerico, tastierino decimale e tastierino numerico

33
00:02:33,350 --> 00:02:40,460
e lì ad esempio il tastierino decimale è un input che consente all'utente di inserire numeri decimali che è proprio quello

34
00:02:40,460 --> 00:02:46,250
che voglio qui per il mio prezzo. Quindi l'impostazione di questo tipo di tastiera qui

35
00:02:46,250 --> 00:02:50,660
ha molto senso perché ora se diamo un'occhiata a questo input

36
00:02:51,080 --> 00:02:58,460
di prezzo qui e seleziono la tastiera software che puoi fare con il comando k scorciatoia qui su iOS o

37
00:02:58,520 --> 00:03:07,340
con il menu hardware lassù, poi tastiera, attiva o disattiva la tastiera del software, vedi che ora ho questa tastiera decimale che si apre

38
00:03:07,340 --> 00:03:12,860
qui mentre sugli altri input, ho una normale tastiera di testo e, naturalmente, è lo

39
00:03:13,220 --> 00:03:14,750
stesso su Android.

40
00:03:14,750 --> 00:03:20,590
Se andiamo all'amministratore lì e poi diamo un'occhiata al prezzo, vediamo anche che lì, ci viene presentato

41
00:03:20,590 --> 00:03:26,200
questo input intuitivo anziché la normale tastiera di testo che otteniamo sugli altri campi di input.

42
00:03:26,480 --> 00:03:33,840
Quindi è così che possiamo configurarlo e questa è ovviamente una configurazione importante. Possiamo anche configurare altre cose,

43
00:03:34,010 --> 00:03:38,840
ad esempio qui sull'input del titolo qui.

44
00:03:39,060 --> 00:03:43,950
Se colpisci lo spazio di controllo e dai un'occhiata al completamento automatico, vedi che ci sono un sacco di cose

45
00:03:43,950 --> 00:03:49,560
che puoi configurare, ad esempio se questo dovrebbe essere auto-capitalizzato. Lì hai diversi valori che puoi

46
00:03:49,560 --> 00:03:55,590
impostare, ad esempio quel personaggio deve essere in maiuscolo, solo frasi o parole complete

47
00:03:55,590 --> 00:04:01,020
e qui, ad esempio, cercherò frasi complete per aiutare a capitalizzare quelle.

48
00:04:01,140 --> 00:04:07,350
Puoi anche attivare la correzione automatica e aggiungendolo in questo modo, assicurati che la correzione automatica sia

49
00:04:07,350 --> 00:04:12,540
attivata per questo input, impostandolo su false, potresti disabilitarlo o semplicemente omettendolo, ovviamente è

50
00:04:12,540 --> 00:04:18,120
anche un'opzione e così via . Ci sono un sacco di cose che puoi

51
00:04:18,120 --> 00:04:23,730
configurare e ti consiglio vivamente come sempre di dare un'occhiata ai documenti ufficiali e di conoscere le

52
00:04:23,790 --> 00:04:25,930
opzioni di configurazione disponibili e cosa

53
00:04:25,980 --> 00:04:32,400
fanno, anche semplicemente giocare con quelle in modo da ottenere un idea di cosa puoi fare lì e cosa fa

54
00:04:32,400 --> 00:04:40,090
ogni opzione e cosa potrebbe avere senso per la tua prossima applicazione. Un altro valore che voglio impostare ad esempio è il

55
00:04:40,090 --> 00:04:42,580
tipo di chiave di ritorno.

56
00:04:42,580 --> 00:04:44,920
Questo può essere impostato su un paio

57
00:04:44,980 --> 00:04:50,350
di valori e di nuovo se controlli i documenti ufficiali, imparerai che non tutti i valori sono

58
00:04:50,440 --> 00:04:56,260
disponibili su tutte le piattaforme, solo questi cinque sono disponibili su più piattaforme e lì, puoi sostanzialmente configurare questo

59
00:04:56,260 --> 00:05:00,130
pulsante in fondo angolo destro. Se dai un'occhiata al tuo input

60
00:05:06,070 --> 00:05:12,090
qui e fai clic su uno qualsiasi degli input, è questo pulsante qui nell'angolo in basso a destra che

61
00:05:12,090 --> 00:05:15,950
dice return here for imageUrl. Ora sul titolo, l'ho impostato su successivo,

62
00:05:15,960 --> 00:05:21,870
quindi se fai clic nel campo del titolo, ora vedi qui che dice più ampio, che è tedesco per il prossimo e

63
00:05:21,870 --> 00:05:27,770
questo è solo perché ho un emulatore tedesco qui e lasciami anche riavviare questo su Android perché si è bloccato in

64
00:05:27,770 --> 00:05:29,660
modo da poterlo mostrare anche lì.

65
00:05:30,730 --> 00:05:36,280
Se andiamo al nostro input lì, fai clic sul titolo, vedi questo pulsante successivo qui, su imageUrl, hai

66
00:05:36,280 --> 00:05:41,080
questo pulsante fatto qui e che può essere configurato con il tipo di chiave di

67
00:05:41,080 --> 00:05:47,020
ritorno, anche se tieni presente che questo controlla solo come questo viene visualizzato, ciò che dice lì, qual è

68
00:05:47,020 --> 00:05:49,150
l'etichetta lì o quale tipo di pulsante

69
00:05:49,300 --> 00:05:55,150
viene presentato, non cambia automaticamente ciò che fa questo pulsante, ad esempio se faccio clic sul pulsante più largo,

70
00:05:55,150 --> 00:05:56,200
questa tastiera

71
00:05:56,200 --> 00:05:59,990
si chiude, lo stesso vale se Faccio clic sul tasto Invio qui.

72
00:06:00,150 --> 00:06:05,040
Ora, quando parliamo dei comportamenti degli input di testo, allora tutti gli eventi che possiamo ascoltare sono interessanti.

73
00:06:05,340 --> 00:06:09,190
Con on, hai un'idea di tutti gli eventi che puoi ascoltare e, ad

74
00:06:09,210 --> 00:06:15,350
esempio, hai avuto onBlur che si attiva ogni volta che un input perde lo stato attivo, onChange si attiva, quindi ad ogni sequenza

75
00:06:15,420 --> 00:06:21,090
di tasti e ti dà l'intero evento di input, onChangeText che attiva anche ad ogni battitura ma ti dà solo il

76
00:06:21,150 --> 00:06:25,230
testo che è stato inserito, che in genere è ciò che ti interessa di più.

77
00:06:25,980 --> 00:06:35,000
onEndEditing dove possiamo anche avere un'idea di quando si attiva, quindi se accedo onEndEditing qui, vediamo quando questo viene stampato nella

78
00:06:35,010 --> 00:06:37,440
console, se ora vado qui

79
00:06:37,440 --> 00:06:46,710
al mio input e si prega di notare che sono sull'input del titolo, quindi se Digito lì test, vediamo che non si

80
00:06:46,710 --> 00:06:49,350
è attivato qui, se clicco fuori

81
00:06:49,350 --> 00:06:54,930
da questo, ora ha sparato su EndEditing. Lo stesso vale se, ad esempio, faccio clic

82
00:06:54,930 --> 00:07:01,920
sul pulsante più largo, quindi praticamente ogni volta che lasciamo questa tastiera focalizzata o in generale quando facciamo clic anche

83
00:07:01,920 --> 00:07:03,890
su quel pulsante fatto.

84
00:07:03,960 --> 00:07:10,620
Inoltre, abbiamo anche altri ascoltatori, ad esempio onFocus che ovviamente si attiva quando questo input diventa attivo

85
00:07:10,620 --> 00:07:19,640
o anche su SelectionChange quando selezioniamo il testo lì o onSubmitEditing che viene attivato quando si fa clic su questo pulsante di ritorno,

86
00:07:19,640 --> 00:07:21,860
quindi se aggiungoSubmitEditing qui, quando

87
00:07:21,860 --> 00:07:30,820
aggiungi anche questo listener e aggiungi anche un'istruzione di registro della console, vedi che ora si attiverà, ogni volta che scrivo qui,

88
00:07:30,820 --> 00:07:37,820
non si attiva, ogni volta che clicco fuori da qui, inoltre non si attiva, otteniamo solo onEndEditing accedi

89
00:07:37,960 --> 00:07:39,130
qui ma

90
00:07:39,130 --> 00:07:45,600
si attiverà se premo il tasto più largo qui, lì vedi suSubmitEditing, quindi questo è un

91
00:07:45,610 --> 00:07:47,290
ascoltatore che utilizzeresti per

92
00:07:47,290 --> 00:07:52,870
ascoltare quando si fa clic sul tasto Invio e quindi puoi fare quello che

93
00:07:52,870 --> 00:07:59,230
vuoi fare, come inviare il tuo dati o spostare automaticamente lo stato attivo sull'input successivo

94
00:07:59,230 --> 00:08:03,090
con l'aiuto di riferimenti, ad esempio se si desidera.

95
00:08:03,200 --> 00:08:08,240
Ecco come puoi configurarlo e come ho detto, ti consiglio di immergerti in

96
00:08:08,240 --> 00:08:10,370
questo per avere un'idea di

97
00:08:10,400 --> 00:08:16,160
come funziona, ora passerò comunque e voglio assicurarmi che non ascoltiamo solo gli input e memorizziamo

98
00:08:16,160 --> 00:08:19,460
i valori ma convalidiamo anche ciò che l'utente immette.