1 00:00:02,330 --> 00:00:09,590 Ainsi, le bouton d'ajout appelle ici AddGoal et cela transmet essentiellement l'objectif à l'application. js qui est exactement ce dont nous avons besoin mais ce que 2 00:00:09,590 --> 00:00:10,860 nous devons également 3 00:00:11,030 --> 00:00:16,660 faire est que nous devons nous assurer que lorsque nous ajoutons un nouvel objectif, le modal se ferme. 4 00:00:16,700 --> 00:00:22,790 Maintenant, gardez à l'esprit que nous contrôlons finalement la visibilité modale depuis l'intérieur de l'application. fichier js car là, nous avons l'état 5 00:00:22,790 --> 00:00:29,690 isAddMode que nous changeons lorsque nous cliquons sur ce bouton ici, le bouton ajouter un nouvel 6 00:00:29,690 --> 00:00:31,050 objectif par 7 00:00:31,220 --> 00:00:38,900 exemple et cette valeur d'état, isAddMode est transmis à l'entrée d'objectif où nous l'utilisons ensuite pour contrôler la 8 00:00:38,900 --> 00:00:40,310 visibilité de le modal. 9 00:00:40,340 --> 00:00:46,580 Donc, pour nous assurer que le modal disparaît, nous devons simplement changer à nouveau 10 00:00:46,580 --> 00:00:52,270 isAddMode à l'intérieur de l'application. Fichier js car la nouvelle valeur sera alors automatiquement transmise à l'entrée d'objectif. 11 00:00:52,310 --> 00:00:56,990 Donc, tout ce que nous avons à faire est d'ajouter un gestionnaire d'objectifs où nous définissons les objectifs du 12 00:00:56,990 --> 00:01:03,920 cours, nous devons également définir isAddMode sur false parce que nous avons terminé l'ajout. Maintenant, une petite note, la façon dont React fonctionne si vous définissez 13 00:01:03,920 --> 00:01:06,500 deux états l'un après l'autre, il les regroupera 14 00:01:06,590 --> 00:01:08,230 par lots, il ne restituera pas 15 00:01:08,270 --> 00:01:14,060 le composant deux fois après le premier changement et après le deuxième changement, au lieu de cela, il s'appliquera essentiellement 16 00:01:14,060 --> 00:01:19,460 tous les changements d'état à la fois et ne rendent le composant qu'une seule fois, ce qui bien 17 00:01:19,460 --> 00:01:20,110 sûr 18 00:01:20,120 --> 00:01:23,240 est bon, sinon nous aurions un cycle de restitution inutile là-bas 19 00:01:23,240 --> 00:01:29,960 et c'est simplement une belle optimisation que React fait pour nous. Ainsi, nous pouvons absolument changer deux états différents l'un après l'autre 20 00:01:29,990 --> 00:01:31,760 comme ceci et avec cela, 21 00:01:31,760 --> 00:01:38,740 le modal devrait également disparaître si nous le définissons sur faux. Testons-le ici sur 22 00:01:38,740 --> 00:01:40,430 iOS. 23 00:01:40,480 --> 00:01:46,320 Si j'ajoute learn React Native ici, cliquez sur ajouter, cela disparaît 24 00:01:46,420 --> 00:01:52,530 et maintenant j'apprends beaucoup plus, cela fonctionne aussi et je peux également 25 00:01:52,530 --> 00:01:54,510 supprimer des éléments. 26 00:01:54,740 --> 00:01:58,910 Maintenant, pour tester cela sur Android, même procédure que précédemment, 27 00:01:59,060 --> 00:02:01,310 redémarrons réellement cela sur Android, 28 00:02:05,490 --> 00:02:11,840 cliquez sur ajouter un nouvel objectif et découvrez React Native ici, cliquez sur ajouter et cela 29 00:02:11,850 --> 00:02:23,740 le ferme, maintenant apprenons également bien plus ici, comme ceci et cela fonctionne également correctement. Maintenant, deux petites améliorations que je veux encore appliquer, pour une je veux effacer l'entrée 30 00:02:23,740 --> 00:02:29,800 une fois que nous avons terminé et en plus, je veux fournir un bouton d'annulation, de 31 00:02:29,800 --> 00:02:36,550 sorte qu'au lieu d'ajouter, nous pourrions également annuler ici pour fermer le modal sans ajouter d'élément car pour 32 00:02:36,610 --> 00:02:40,290 l'instant, ce n'est pas quelque chose qu'on peut faire. 33 00:02:40,300 --> 00:02:43,300 Commençons par effacer notre entrée ici 34 00:02:43,300 --> 00:02:48,480 après avoir entré quelque chose. Pour cela dans l'entrée d'objectif, à la fin, nous avons 35 00:02:48,480 --> 00:02:49,530 cet objectif entré 36 00:02:49,560 --> 00:02:56,370 et nous devons le réinitialiser une fois que nous avons ajouté un nouvel objectif. Maintenant, bien sûr, nous ajoutons un nouvel objectif lorsque nous appuyons sur 37 00:02:56,370 --> 00:03:01,690 ce bouton d'ajout et là, à la fin, nous déclenchons une fonction que nous obtenons à l'aide de l'accessoire onAddGoal. 38 00:03:01,700 --> 00:03:07,110 Maintenant, pour effacer également notre entrée, ce que nous pouvons faire ici, c'est que nous pouvons ajouter 39 00:03:07,290 --> 00:03:12,440 une fonction à l'intérieur du composant d'entrée d'objectif, ajouter un gestionnaire d'objectif ou tout ce que 40 00:03:12,560 --> 00:03:19,310 vous voulez appeler, c'est une fonction qui ne doit prendre aucun argument et au final, c'est maintenant cette fonction que je 41 00:03:19,310 --> 00:03:20,270 veux déclencher. 42 00:03:20,300 --> 00:03:23,330 Je veux donc déclencher l'ajout de gestionnaires 43 00:03:23,360 --> 00:03:29,660 d'objectifs, donc ma propre fonction dans ce composant. Maintenant ici, je veux appeler des accessoires sur AddGoal 44 00:03:29,660 --> 00:03:35,630 sans lier ici, nous pouvons simplement l'appeler comme ça parce que lorsque cette fonction s'exécute, je veux l'exécuter, ici 45 00:03:35,630 --> 00:03:39,340 nous passons juste un pointeur sur cette fonction sans parenthèses, alors ici 46 00:03:39,340 --> 00:03:44,270 nous ne doit pas avoir de parenthèses pour ne pas l'exécuter trop tôt, ici nous avons 47 00:03:44,270 --> 00:03:49,460 absolument besoin de parenthèses car cela ne s'exécute que lorsque cette fonction s'exécute et c'est à 48 00:03:49,460 --> 00:03:52,340 ce moment que je veux déclencher la fonction 49 00:03:52,340 --> 00:03:59,000 dans mon composant parent, donc dans le composant d'application ici. Et ici, sur onAddGoal, bien sûr, je veux toujours transmettre mon objectif 50 00:03:59,000 --> 00:03:59,390 entré 51 00:03:59,390 --> 00:04:03,770 ici, donc cet état, je veux le transmettre, mais par la suite, je veux également le supprimer. 52 00:04:04,010 --> 00:04:06,140 Par la suite, je vais à nouveau 53 00:04:06,140 --> 00:04:10,930 définir l'objectif entré sur une chaîne vide qui réinitialisera le texte que nous avons entré ici. 54 00:04:10,970 --> 00:04:12,120 Voilà donc une chose, 55 00:04:12,140 --> 00:04:18,770 l'autre chose est un bouton qui nous permet de fermer ceci et pour cela, nous pouvons ajouter un bouton ici et ce bouton pourrait 56 00:04:18,950 --> 00:04:22,100 avoir un titre d'annulation parce que c'est finalement ce que ce 57 00:04:22,100 --> 00:04:23,990 bouton devrait faire et pour l'annuler bouton, 58 00:04:23,990 --> 00:04:24,880 il peut 59 00:04:24,890 --> 00:04:29,410 être agréable de ne pas avoir à utiliser la couleur bleue par défaut mais de changer cette 60 00:04:29,420 --> 00:04:33,410 couleur et vous pouvez le faire en ajoutant ici la couleur prop, par exemple, nous 61 00:04:33,410 --> 00:04:39,250 pourrions mettre cela en rouge ici parce que le rouge à mon avis est une belle couleur pour une annulation bouton. 62 00:04:40,850 --> 00:04:44,960 Si nous enregistrons cela et que nous testons cela ici sur 63 00:04:44,960 --> 00:04:47,540 iOS, nous voyons le bouton Annuler 64 00:04:47,690 --> 00:04:55,300 et le bouton Ajouter et maintenant si j'apprends React Native ici et j'ajoute cela, cela est ajouté et si je rouvre 65 00:04:55,300 --> 00:05:02,830 cela, vous voyez qu'il a été effacé et bien sûr, annuler ne fait rien car nous devons connecter annuler au composant 66 00:05:02,950 --> 00:05:06,280 d'application où nous contrôlons la visibilité en contrôlant isAddMode. 67 00:05:07,330 --> 00:05:16,090 Donc ici, nous pouvons également ajouter un autre gestionnaire de fonctions dans le composant d'application maintenant, annuler le gestionnaire d'ajout d'objectifs ou quelque chose comme ça, c'est un nom très 68 00:05:16,120 --> 00:05:16,870 long, je 69 00:05:16,870 --> 00:05:21,040 veux juste être clair sur ce que cela fait et quand il est appelé. 70 00:05:21,040 --> 00:05:26,800 Donc, ici, nous avons le gestionnaire supplémentaire d'annulation d'objectif et à la fin ici, nous pouvons simplement définir 71 00:05:26,800 --> 00:05:28,540 isAddMode sur false qui 72 00:05:29,050 --> 00:05:31,020 fermera le modal et bien sûr 73 00:05:31,030 --> 00:05:36,550 nous ne faisons rien d'autre, nous ne changeons pas nos objectifs de cours parce que nous avons annulé 74 00:05:36,550 --> 00:05:38,590 l'ajout et maintenant, nous pouvons le transmettre 75 00:05:38,650 --> 00:05:45,580 à l'élément d'objectif, à l'entrée d'objectif, donc à notre composant ici. Là, nous pouvons ajouter un accessoire onCancel, le nom de cet accessoire 76 00:05:45,580 --> 00:05:48,330 dépend de vous, car il s'agit de votre 77 00:05:48,580 --> 00:05:53,710 propre accessoire sur votre propre composant et j'ai transféré un pointeur à annuler le gestionnaire d'ajout d'objectif 78 00:05:54,000 --> 00:05:59,480 à onCancel et maintenant à l'intérieur de l'entrée d'objectif, nous pouvons déclencher onCancel en appuyant sur ce bouton. 79 00:05:59,500 --> 00:06:04,990 Alors ici, nous ajoutons onPress et nous voulons déclencher des accessoires. onCancel ici, donc la 80 00:06:04,990 --> 00:06:12,690 fonction que nous recevons sur notre accessoire onCancel. Avec cela, le bouton d'annulation devrait fonctionner, oui 81 00:06:12,770 --> 00:06:14,260 fonctionne très bien. 82 00:06:14,510 --> 00:06:17,830 Maintenant, cela devrait aussi fonctionner sur Android, 83 00:06:17,900 --> 00:06:19,310 mais pour 84 00:06:19,310 --> 00:06:22,930 le tester, même procédure que toujours, fermons-le et 85 00:06:22,940 --> 00:06:31,340 redémarrez-le et ensuite, voyons si la suppression de l'entrée fonctionne. Si j'entre ou apprends React Native ici, cliquez sur ajouter, oui c'est 86 00:06:31,340 --> 00:06:33,330 vide et annuler fonctionne également. 87 00:06:33,350 --> 00:06:38,300 En ce qui concerne le style ici sur Android, ce serait bien d'avoir un peu d'espacement entre les 88 00:06:38,390 --> 00:06:43,150 boutons ou en fait sur les deux plates-formes, peut-être que ces boutons sont assis côte à côte.