1 00:00:02,350 --> 00:00:06,760 Nous avons donc passé un peu de temps sur l'entrée, mais la gestion des entrées 2 00:00:06,760 --> 00:00:09,970 utilisateur est importante, vous voulez le faire d'une manière qui semble 3 00:00:09,970 --> 00:00:11,470 naturelle à l'utilisateur, qui ait 4 00:00:11,590 --> 00:00:17,000 du sens pour l'utilisateur et où vous ne ferez jamais confiance à votre utilisateur et vous validerez toujours ce 5 00:00:17,020 --> 00:00:19,750 l'utilisateur entre et nous approfondirons cette opération de validation, 6 00:00:19,750 --> 00:00:24,760 l'entrée de l'utilisateur remettant des choses plus tard dans le cours où nous acceptons également des entrées plus 7 00:00:24,760 --> 00:00:25,520 complexes qu'un 8 00:00:25,540 --> 00:00:31,030 simple numéro, mais pour l'instant, c'était un excellent premier aperçu de la façon dont vous pouvez styliser de telles une 9 00:00:31,210 --> 00:00:37,910 entrée et comment vous assurer d'obtenir les données dont vous avez besoin. Avec ça, je ne sais pas pour vous mais je pense qu'il est temps de 10 00:00:37,920 --> 00:00:40,710 progresser aussi avec notre jeu car nous sommes un peu coincés 11 00:00:40,710 --> 00:00:45,600 ici, ce sont toutes des étapes importantes mais nous ne progressons pas vraiment avec notre jeu ou avec notre application ici . 12 00:00:45,600 --> 00:00:49,520 Alors assurons-nous que nous le faisons dans une prochaine étape et pour cela, 13 00:00:49,530 --> 00:00:56,690 pourquoi ne nous assurons-nous pas que nos boutons font quelque chose? Commençons par le bouton de réinitialisation très rapidement, car ce 14 00:00:56,690 --> 00:00:58,760 sera simple. Lorsque vous 15 00:00:58,790 --> 00:01:04,400 appuyez dessus, je souhaite simplement réinitialiser la valeur entrée. Je vais donc enregistrer une nouvelle fonction là-haut dans 16 00:01:04,410 --> 00:01:10,310 le composant d'écran de démarrage du jeu, le nommer réinitialiser le gestionnaire d'entrée et c'est juste la convention de 17 00:01:10,310 --> 00:01:17,450 dénomination que j'aime, nommer ces fonctions qui sont déclenchées lors d'un événement utilisateur quelque chose de gestionnaire à la fin juste pour le faire 18 00:01:17,450 --> 00:01:19,840 clair que ceux-ci gèrent certains événements, ce n'est 19 00:01:19,970 --> 00:01:26,210 pas un must, juste une préférence que j'ai pour les applications React en général et donc aussi pour les applications 20 00:01:26,210 --> 00:01:27,040 React Native. 21 00:01:27,260 --> 00:01:34,040 Ce sera une fonction qui appelle ensuite définir la valeur entrée qui est notre fonction de réglage d'état ici 22 00:01:34,220 --> 00:01:39,370 pour mettre à jour l'état que nous réinjectons dans l'entrée et le définir sur 23 00:01:39,460 --> 00:01:46,690 une chaîne vide et oui, avec cela, nous pouvons le connecter au bouton de réinitialisation ici, onPress devrait maintenant simplement exécuter 24 00:01:46,700 --> 00:01:49,540 le gestionnaire d'entrée de réinitialisation comme ça. 25 00:01:49,700 --> 00:01:50,780 Essayons 26 00:01:50,780 --> 00:01:53,760 rapidement, entrons quelque chose ici, réinitialisons 27 00:01:53,780 --> 00:01:55,110 et c'est parti, 28 00:01:55,310 --> 00:01:57,440 ça a l'air bien 29 00:01:57,470 --> 00:01:58,790 et assurez-vous également 30 00:01:58,790 --> 00:02:09,390 que ce bouton ici, le bouton de confirmation fait quelque chose. Pour cela, je vais ajouter un autre bouton, confirmer le gestionnaire d'entrée et nous pourrions simplement démarrer 31 00:02:09,420 --> 00:02:12,600 le jeu immédiatement ici, mais aussi juste pour le pratiquer, 32 00:02:12,600 --> 00:02:20,030 je veux donner à l'utilisateur une dernière chance de changer son choix, alors ici je veux juste taper de sortie a c'est votre choix, 33 00:02:20,200 --> 00:02:21,090 voulez-vous démarrer 34 00:02:21,090 --> 00:02:27,050 un message, où l'utilisateur obtient alors un bouton pour démarrer le jeu, juste une étape supplémentaire donc nous avons 35 00:02:27,360 --> 00:02:30,910 un peu de pratique supplémentaire ici. Pour cela, je vais 36 00:02:30,930 --> 00:02:38,800 ajouter un nouvel état qui gère l'état déjà confirmé par l'utilisateur et initialement, c'est faux mais bien sûr nous 37 00:02:38,910 --> 00:02:43,020 pouvons changer cela et nous voulons pouvoir obtenir l'état actuel. 38 00:02:43,020 --> 00:02:45,980 Nous obtenons donc ici si l'utilisateur a confirmé ou non et nous 39 00:02:45,990 --> 00:02:52,410 pouvons définir cet état confirmé avec ce deuxième élément du tableau que nous extrayons. Donc, là-bas dans Confirmer le gestionnaire d'entrée, 40 00:02:52,410 --> 00:03:00,160 je mets confirm à true, sur le gestionnaire d'entrée de réinitialisation d'ailleurs, je le mets à faux parce que si 41 00:03:00,160 --> 00:03:05,710 l'utilisateur clique sur reset, l'utilisateur doit certainement confirmer les valeurs, nous devons donc le réinitialiser, 42 00:03:05,710 --> 00:03:09,110 puis ici dans le gestionnaire d'entrée de confirmation, je 43 00:03:09,160 --> 00:03:12,750 veux aussi faire deux choses différentes, deux autres choses. 44 00:03:12,880 --> 00:03:20,530 L'une consiste à réinitialiser la valeur entrée, mais également à enregistrer la valeur entrée comme valeur avec laquelle 45 00:03:20,530 --> 00:03:22,300 nous commencerions le jeu. 46 00:03:22,390 --> 00:03:24,840 Nous pouvons le faire avec 47 00:03:24,880 --> 00:03:34,430 un autre état que nous gérons qui ne contient initialement rien, n'a aucune valeur, est indéfini initialement parce que cela devrait être le 48 00:03:34,430 --> 00:03:40,370 nombre sélectionné et qui devrait maintenant aussi être vraiment un nombre et non du texte. 49 00:03:40,910 --> 00:03:44,400 Donc, ici, nous avons le numéro sélectionné et une fonction pour 50 00:03:44,480 --> 00:03:51,560 le définir et lorsque l'utilisateur a cliqué sur confirmer avant de réinitialiser ma valeur entrée, bien que cela ici soit de toute façon groupé 51 00:03:51,610 --> 00:03:57,290 afin que nous puissions également utiliser la valeur entrée ici après l'avoir définie sur un chaîne vide car cela ne 52 00:03:57,470 --> 00:04:02,540 sera fait que dans le prochain cycle de rendu et pas immédiatement après l'exécution de cette ligne. 53 00:04:02,540 --> 00:04:07,530 Donc, nous pouvons toujours exécuter en toute sécurité ou accéder à cette valeur entrée par la 54 00:04:07,730 --> 00:04:17,930 suite si nous le voulons, car ici, je veux définir ma valeur entrée avec parseInt en transmettant la valeur entrée, donc je l'ai définie comme étant mon numéro sélectionné et encore, je peux 55 00:04:18,050 --> 00:04:19,300 toujours accéder la valeur 56 00:04:19,340 --> 00:04:24,980 entrée ici même si nous la réinitialisons parce que cette chose de réinitialisation ici sera essentiellement mise en 57 00:04:25,190 --> 00:04:30,740 file d'attente par React et ne sera traitée que la prochaine fois que le composant sera rendu par 58 00:04:30,740 --> 00:04:31,480 la 59 00:04:31,580 --> 00:04:38,660 suite et ces trois changements d'état sont tous regroupés pour aboutir à un cycle de rendu, donc nous peut accéder en toute sécurité 60 00:04:38,660 --> 00:04:42,850 à la valeur entrée ici, mais nous pouvons également le faire avant de 61 00:04:42,860 --> 00:04:44,200 le réinitialiser, peu importe. 62 00:04:44,210 --> 00:04:49,520 La chose importante est cependant que nous analysons ceci comme un entier afin que nous convertissions ce texte en nombre 63 00:04:49,520 --> 00:04:57,050 ici et en fait, j'ajouterai encore une autre étape supplémentaire avant de faire cela. Dès le début, j'aurai ici mon numéro choisi qui 64 00:04:57,140 --> 00:05:00,410 est ce numéro analysé et avant de 65 00:05:00,410 --> 00:05:08,660 faire quoi que ce soit, je veux vérifier si le numéro choisi n'est pas un nombre qui est une valeur Javascript 66 00:05:08,660 --> 00:05:16,550 par défaut, donc s'il n'est toujours pas un nombre même si nous essayons de vérifier les caractères non valides ou 67 00:05:16,550 --> 00:05:20,730 si le nombre choisi est plus petit ou égal à zéro. 68 00:05:21,200 --> 00:05:24,140 Si c'est le cas, je veux juste revenir, 69 00:05:24,140 --> 00:05:25,430 je ne veux 70 00:05:25,460 --> 00:05:31,580 pas continuer, donc return terminera l'exécution de la fonction et ne confirmera pas, ne l'utilisera pas comme 71 00:05:31,850 --> 00:05:33,710 valeur car la valeur n'est 72 00:05:33,830 --> 00:05:39,010 pas valide, seuls les nombres positifs sont autorisés et aucun numéro invalide n'est autorisé. 73 00:05:39,020 --> 00:05:46,340 De plus, je veux également ajouter un chèque supplémentaire et vérifier si le nombre choisi est peut-être supérieur à 99 car cela ne serait 74 00:05:46,350 --> 00:05:48,770 pas autorisé non plus, je veux avoir 75 00:05:48,770 --> 00:05:56,600 un nombre entre 1 et 99 et ce devrait être un nombre. Si cela ne correspond pas à ces critères, nous reviendrons, 76 00:05:56,840 --> 00:06:03,740 maintenant sinon nous allons définir ce numéro choisi comme le numéro sélectionné, puis réinitialiser l'entrée, puis ces trois appels 77 00:06:03,740 --> 00:06:09,440 d'état définis seront regroupés et le composant sera restitué et nous aurons notre nouvel état 78 00:06:09,440 --> 00:06:17,790 qui a ce numéro pris en compte comme le numéro sélectionné. Alors maintenant, nous pouvons connecter le gestionnaire d'entrée de confirmation au 79 00:06:17,790 --> 00:06:23,700 bouton de confirmation ici et maintenant, certains commentaires visuels seraient également intéressants de voir que la 80 00:06:23,700 --> 00:06:32,220 confirmation a fonctionné ou d'obtenir également une erreur si nous avons violé l'une de ces règles ici, afin de ne pas simplement revenir 81 00:06:32,220 --> 00:06:34,440 mais aussi afficher une alerte. 82 00:06:35,320 --> 00:06:41,870 Maintenant, commençons peut-être par les commentaires avant de travailler ensuite sur l'alerte. Pour les commentaires, ci-dessous cette 83 00:06:42,650 --> 00:06:51,710 fonction mais à l'intérieur de notre composant fonctionnel, je veux vérifier si nous avons confirmé et ensuite définir 84 00:06:51,710 --> 00:06:54,990 un contenu spécial qui devrait être sorti. 85 00:06:55,010 --> 00:06:58,900 Donc, ici, nous avons la sortie confirmée qui n'est normalement 86 00:06:58,970 --> 00:07:07,340 pas définie, mais si nous avons confirmé, la sortie confirmée est un code jsx où nous résumons en quelque sorte ce que l'utilisateur a 87 00:07:07,340 --> 00:07:11,330 entré et donnons à l'utilisateur le bouton de démarrage du jeu. 88 00:07:11,330 --> 00:07:18,990 Maintenant, juste pour voir si cela fonctionne, allons-y avec du texte ici et disons simplement le numéro choisi 89 00:07:19,020 --> 00:07:22,470 et sortir le numéro sélectionné ici, numéro sélectionné, 90 00:07:22,470 --> 00:07:25,700 c'est notre état que nous gérons ici. 91 00:07:25,770 --> 00:07:32,100 Donc, puisque nous appelons ensemble confirmé et ainsi de suite, le composant sera rendu à nouveau lorsque cela 92 00:07:32,100 --> 00:07:38,010 est choisi, donc toute cette fonction de composant s'exécutera à nouveau et cela signifie que confirmé sera 93 00:07:38,040 --> 00:07:43,470 alors vrai pour cette prochaine exécution parce que nous le définissons ici et nous allons 94 00:07:43,500 --> 00:07:44,310 donc définir 95 00:07:44,310 --> 00:07:51,820 la sortie confirmée comme étant ce texte et maintenant nous pouvons ajouter la sortie confirmée, disons ici en dessous de notre carte. 96 00:07:51,820 --> 00:07:57,340 Alors là, je veux sortir la sortie confirmée et c'est soit 97 00:07:57,340 --> 00:07:57,940 indéfini, 98 00:07:58,060 --> 00:08:05,900 n'imprimant rien à l'écran ou c'est ce texte. Avec cela enregistré si nous revenons en arrière et j'entre le numéro et le confirme ici, nous voyons 99 00:08:05,900 --> 00:08:06,410 le numéro. 100 00:08:06,950 --> 00:08:10,210 Si j'entre quelque chose d'invalide comme zéro, nous ne 101 00:08:10,250 --> 00:08:15,360 le voyons pas, donc notre chèque semble fonctionner et un numéro valide est cependant émis. 102 00:08:15,400 --> 00:08:19,200 Maintenant, ce n'est pas le design final que je veux avoir, mais cela prouve que cela fonctionne. 103 00:08:19,390 --> 00:08:26,170 Avant de finaliser cette conception, assurez-vous que nous affichons également une alerte si quelque chose d'invalide est entré.