1
00:00:02,260 --> 00:00:07,540
Donc, pour cela, comme je l'ai mentionné, je suis de retour dans le projet sur lequel

2
00:00:07,540 --> 00:00:09,640
nous avons travaillé et bien sûr,

3
00:00:09,640 --> 00:00:16,060
maintenant l'écran d'édition du produit est ce qui m'intéresse, c'est l'écran où j'ai ces entrées de texte ici avec mes étiquettes,

4
00:00:16,060 --> 00:00:19,540
puis le saisie de texte, où nous avons actuellement une gestion

5
00:00:19,540 --> 00:00:25,390
d'entrée très basique, nous récupérons au moins l'entrée utilisateur et la stockons à l'aide de l'état React, avec le

6
00:00:25,450 --> 00:00:26,460
crochet d'état

7
00:00:26,560 --> 00:00:30,200
d'utilisation, nous réintroduisons ensuite les valeurs Android dans l'entrée et c'est tout.

8
00:00:30,310 --> 00:00:37,210
Cela nous permet de capturer et d'utiliser les entrées utilisateur, mais d'une part, nous pouvons améliorer la façon dont nous le

9
00:00:37,210 --> 00:00:42,730
faisons, nous pouvons l'écrire de manière plus réutilisable et nous ne faisons aucune validation, donc ce

10
00:00:42,760 --> 00:00:46,510
sont les choses que je veux changer dans ce module.

11
00:00:46,530 --> 00:00:50,850
De plus, nous ne configurons pas nos entrées de quelque manière que ce soit, ce qui signifie

12
00:00:50,940 --> 00:00:53,850
qu'en ce moment toutes les entrées de texte sont égales.

13
00:00:53,850 --> 00:00:57,140
Nous ne changeons pas le type de clavier que

14
00:00:57,270 --> 00:01:02,910
nous présentons, nous n'offrons pas d'entrée multiligne par exemple pour des textes plus longs comme ici pour la

15
00:01:02,910 --> 00:01:08,370
description, rien de tout cela ne se passe et donc commençons en fait par configurer ces entrées

16
00:01:08,370 --> 00:01:15,120
avant de continuer à la validation et ainsi de suite. Une configuration importante que vous pouvez ajouter à vos claviers

17
00:01:15,180 --> 00:01:21,420
est le type de clavier. Le prop de type clavier peut être défini et là vous avez quelques valeurs disponibles. Maintenant, vous avez un peu de

18
00:01:21,420 --> 00:01:26,970
valeurs ici, mais les documents officiels sont également un endroit que vous devez consulter lorsque vous pensez au type que

19
00:01:26,970 --> 00:01:33,230
vous souhaitez attribuer ici, car lorsque vous visitez la documentation de saisie de texte officielle, vous voyez bien sûr quelques exemples, mais

20
00:01:33,230 --> 00:01:38,270
ensuite vous voyez également tous les accessoires que vous avez et là, vous pouvez en savoir plus

21
00:01:38,270 --> 00:01:41,450
sur chaque accessoire et comment le configurer et pour le type

22
00:01:41,450 --> 00:01:46,010
de clavier par exemple, nous avons appris que seuls ces types sont pris en charge multiplateforme.

23
00:01:46,160 --> 00:01:52,080
Donc, bien que nous ayons des types iOS et Android spécifiques disponibles, ces types ne peuvent être utilisés qu'avec une vérification de

24
00:01:52,130 --> 00:01:53,750
la plate-forme afin de vous assurer

25
00:01:53,750 --> 00:01:58,310
que vous n'utilisez pas le type sur Android qui n'est pas pris en charge là-bas et qui

26
00:01:58,310 --> 00:01:59,560
n'aurait donc aucun effet.

27
00:02:00,230 --> 00:02:06,430
Par conséquent, je m'en tiendrai aux types de plates-formes croisées, de sorte que je n'ai pas à ajouter une vérification de plate-forme supplémentaire et là, généralement pour, disons,

28
00:02:06,440 --> 00:02:11,600
du texte normal, nous nous en tiendrions à la valeur par défaut, ce qui bien sûr est donc un type que nous n'avons pas

29
00:02:11,600 --> 00:02:18,110
doivent attribuer, mais cela change par exemple lorsque nous regardons notre entrée de prix. Là, je veux m'assurer que les gens n'entrent que des nombres

30
00:02:18,110 --> 00:02:24,860
valides, qu'ils n'entrent aucun texte et donc bien sûr, je veux montrer le bon clavier pour les aider et si nous jetons

31
00:02:24,860 --> 00:02:27,850
un coup d'œil à la documentation officielle, nous voyons qu'il

32
00:02:28,130 --> 00:02:33,170
y a trois principaux types de claviers multiplates-formes que nous pouvons montrer - pavé numérique, pavé décimal

33
00:02:33,350 --> 00:02:40,460
et numérique et là, par exemple, le pavé décimal est une entrée qui permet à l'utilisateur d'entrer des nombres décimaux, ce qui est exactement

34
00:02:40,460 --> 00:02:46,250
ce que je veux ici pour mon prix. Donc, définir ce type de clavier ici a

35
00:02:46,250 --> 00:02:50,660
beaucoup de sens parce que maintenant, si nous jetons un coup d'œil

36
00:02:51,080 --> 00:02:58,460
à cette entrée de prix ici et que je permute le clavier logiciel que vous pouvez faire avec le raccourci de commande

37
00:02:58,520 --> 00:03:07,340
k ici sur iOS ou avec le menu matériel là-haut, puis clavier, basculer clavier logiciel, vous voyez que maintenant j'ai ce clavier décimal qui s'ouvre ici

38
00:03:07,340 --> 00:03:12,860
alors que sur les autres entrées, j'ai un clavier texte normal et bien sûr, c'est la

39
00:03:13,220 --> 00:03:14,750
même chose sur Android.

40
00:03:14,750 --> 00:03:20,590
Si nous allons à l'administrateur là-bas et que nous regardons ensuite le prix, nous voyons également que là, on nous présente cette

41
00:03:20,590 --> 00:03:26,200
entrée conviviale pour les numéros au lieu du clavier de texte normal que nous obtenons dans les autres champs de saisie.

42
00:03:26,480 --> 00:03:33,840
Voilà donc comment nous pouvons configurer cela et c'est bien sûr une configuration importante. Nous pouvons également configurer d'autres choses,

43
00:03:34,010 --> 00:03:38,840
par exemple ici sur l'entrée de titre ici.

44
00:03:39,060 --> 00:03:43,950
Si vous atteignez l'espace de contrôle et que vous regardez la saisie semi-automatique, vous voyez qu'il y a un tas de choses

45
00:03:43,950 --> 00:03:49,560
que vous pouvez configurer, par exemple si cela doit être capitalisé automatiquement. Là, vous avez différentes valeurs que vous pouvez

46
00:03:49,560 --> 00:03:55,590
définir, par exemple ce caractère doit être en majuscule, seulement des phrases ou des mots complets et ici,

47
00:03:55,590 --> 00:04:01,020
je vais aller pour des phrases complètes par exemple pour aider à les mettre en majuscule.

48
00:04:01,140 --> 00:04:07,350
Vous pouvez également activer la correction automatique et en l'ajoutant comme ceci, vous vous assurez que la correction automatique est

49
00:04:07,350 --> 00:04:12,540
activée pour cette entrée, en la définissant sur false, vous pouvez la désactiver ou simplement en l'omettant

50
00:04:12,540 --> 00:04:18,120
bien sûr, c'est également une option, etc. . Il y a un tas de choses que vous pouvez

51
00:04:18,120 --> 00:04:23,730
configurer et je recommanderais fortement, comme toujours, de jeter un œil aux documents officiels pour en savoir plus sur les

52
00:04:23,790 --> 00:04:25,930
options de configuration disponibles et ce qu'elles

53
00:04:25,980 --> 00:04:32,400
font, mais aussi simplement jouer avec celles-ci pour obtenir un idée de ce que vous pouvez y faire et de ce que fait

54
00:04:32,400 --> 00:04:40,090
chaque option et de ce qui pourrait avoir du sens pour votre prochaine application. Une autre valeur que je veux définir par exemple est

55
00:04:40,090 --> 00:04:42,580
le type de clé de retour.

56
00:04:42,580 --> 00:04:44,920
Cela peut être réglé sur quelques valeurs et

57
00:04:44,980 --> 00:04:50,350
si vous vérifiez les documents officiels, vous apprendrez que toutes les valeurs ne sont pas disponibles sur

58
00:04:50,440 --> 00:04:56,260
toutes les plates-formes, seules ces cinq sont disponibles sur plusieurs plates-formes et là, vous pouvez essentiellement configurer ce bouton

59
00:04:56,260 --> 00:05:00,130
en bas le coin droit. Si vous regardez votre entrée ici

60
00:05:06,070 --> 00:05:12,090
et que vous cliquez sur l'une des entrées, c'est ce bouton ici dans le coin inférieur droit qui

61
00:05:12,090 --> 00:05:15,950
dit retourner ici pour l'imageUrl. Maintenant, sur le titre, je le mets au

62
00:05:15,960 --> 00:05:21,870
suivant, donc si vous cliquez dans le champ du titre, vous voyez maintenant ici qu'il dit plus large, qui est l'allemand pour le suivant

63
00:05:21,870 --> 00:05:27,770
et c'est juste parce que j'ai un émulateur allemand ici et permettez-moi également de redémarrer ce sur Android car il s'est écrasé là-bas pour

64
00:05:27,770 --> 00:05:29,660
que je puisse le montrer aussi.

65
00:05:30,730 --> 00:05:36,280
Si nous allons à notre entrée là-bas, cliquez dans le titre, vous voyez ce bouton suivant ici, sur l'imageUrl, vous

66
00:05:36,280 --> 00:05:41,080
avez ce bouton terminé ici et qui peut être configuré avec le type de clé de retour,

67
00:05:41,080 --> 00:05:47,020
mais sachez que cela ne contrôle que la façon dont ceci est affiché, ce qu'il dit là, quelle est l'étiquette là-bas

68
00:05:47,020 --> 00:05:49,150
ou quel type de bouton est présenté,

69
00:05:49,300 --> 00:05:55,150
cela ne change pas automatiquement ce que fait ce bouton, par exemple si je clique sur le bouton plus large, ce

70
00:05:55,150 --> 00:05:56,200
clavier se ferme,

71
00:05:56,200 --> 00:05:59,990
la même chose est vraie si Je clique sur la touche retour ici.

72
00:06:00,150 --> 00:06:05,040
Maintenant, lorsque nous parlons des comportements des entrées de texte, tous les événements que nous pouvons écouter sont intéressants.

73
00:06:05,340 --> 00:06:09,190
Avec on, vous avez une idée de tous les événements que vous pouvez écouter

74
00:06:09,210 --> 00:06:15,350
et par exemple là où vous avez obtenu Blur qui se déclenche chaque fois qu'une entrée perd le focus, onChange se déclenche, ainsi à

75
00:06:15,420 --> 00:06:21,090
chaque frappe et vous donne l'événement d'entrée complet, onChangeText qui se déclenche également à chaque frappe, mais ne vous donne que le

76
00:06:21,150 --> 00:06:25,230
texte qui a été saisi, ce qui est généralement ce qui vous intéresse le plus.

77
00:06:25,980 --> 00:06:35,000
onEndEditing où nous pouvons également avoir une idée du moment où cela se déclenche, donc si j'entre onEndEditing ici, voyons quand cela s'imprime dans la

78
00:06:35,010 --> 00:06:37,440
console, si je vais maintenant

79
00:06:37,440 --> 00:06:46,710
ici à mon entrée et s'il vous plaît noter que je suis sur l'entrée de titre, donc si Je tape là-bas test, nous voyons qu'il

80
00:06:46,710 --> 00:06:49,350
ne s'est pas déclenché ici, si je

81
00:06:49,350 --> 00:06:54,930
clique dessus, maintenant il s'est déclenché sur EndEditing. La même chose est vraie si je clique sur le

82
00:06:54,930 --> 00:07:01,920
bouton plus large ici par exemple, donc en gros chaque fois que nous quittons ce clavier avec le focus ou en général lorsque nous cliquons

83
00:07:01,920 --> 00:07:03,890
sur ce bouton fait là aussi.

84
00:07:03,960 --> 00:07:10,620
De plus, nous avons également d'autres écouteurs, comme onFocus qui se déclenche évidemment lorsque cette entrée gagne le

85
00:07:10,620 --> 00:07:19,640
focus ou également onSelectionChange lorsque nous sélectionnons du texte là-bas ou onSubmitEditing qui est déclenché lorsque ce bouton de retour est cliqué, donc si j'ajoute

86
00:07:19,640 --> 00:07:21,860
onSubmitEditing ici, quand je ajoutez également

87
00:07:21,860 --> 00:07:30,820
cet écouteur et ajoutez également une instruction de journal de console, vous voyez que maintenant cela se déclenchera, chaque fois que je tape ici, ne

88
00:07:30,820 --> 00:07:31,390
se

89
00:07:31,390 --> 00:07:37,820
déclenche pas, chaque fois que je clique ici, il ne se déclenche pas non plus, nous obtenons uniquement

90
00:07:37,960 --> 00:07:39,130
le onEndEditing connectez-vous

91
00:07:39,130 --> 00:07:45,600
ici mais il se déclenchera si j'appuie sur la touche plus large ici, là vous voyez onSubmitEditing, c'est

92
00:07:45,610 --> 00:07:47,290
donc un écouteur que

93
00:07:47,290 --> 00:07:52,870
vous utiliseriez pour écouter lorsque la touche retour est cliquée et ensuite vous pouvez faire

94
00:07:52,870 --> 00:07:59,230
ce que vous voulez faire, comme soumettre votre données ou déplacer automatiquement le focus vers l'entrée suivante

95
00:07:59,230 --> 00:08:03,090
à l'aide de références par exemple si vous le souhaitez.

96
00:08:03,200 --> 00:08:08,240
Voici comment vous pouvez configurer cela et comme je l'ai dit, je vous recommande de vous y plonger

97
00:08:08,240 --> 00:08:10,370
pour avoir une idée de comment cela

98
00:08:10,400 --> 00:08:16,160
fonctionne, je vais maintenant passer à autre chose et je veux m'assurer que nous n'écoutons pas seulement les entrées et stocker

99
00:08:16,160 --> 00:08:19,460
les valeurs, mais que nous validons également ce que l'utilisateur entre.