1 00:00:02,250 --> 00:00:03,310 Avez-vous réussi? 2 00:00:03,350 --> 00:00:04,710 Faisons le ensemble. 3 00:00:04,710 --> 00:00:11,390 Créons un nouveau composant ici dans l'entrée d'objectif en important React de React, puis ici, 4 00:00:11,500 --> 00:00:14,040 je nommerai cette entrée d'objectif 5 00:00:14,040 --> 00:00:20,610 et j'aime cette syntaxe constante ici, vous pouvez utiliser l'entrée d'objectif de fonction pour 6 00:00:20,610 --> 00:00:28,120 créer votre composant fonctionnel, ce serait bien aussi. Ensuite, ici, je vais exporter l'entrée d'objectif par défaut et maintenant ici, nous devons 7 00:00:28,120 --> 00:00:31,030 retourner quelque chose et que quelque chose est finalement cette 8 00:00:31,030 --> 00:00:33,700 vue avec la saisie de texte et le bouton. 9 00:00:34,090 --> 00:00:42,650 Alors laissez-moi saisir cette vue entière, la retourner ici entre crochets afin qu'elle soit écrite sur plusieurs lignes et bien formatée et bien sûr, nous 10 00:00:42,650 --> 00:00:50,110 devons maintenant à nouveau importer des éléments de React Native parce que nous utilisons quelques composants de React Native , nous 11 00:00:50,110 --> 00:00:55,840 utilisons le composant vue, nous utilisons le composant de saisie de texte, nous utilisons le composant bouton 12 00:00:55,840 --> 00:01:00,460 et je veux également utiliser le composant feuille de style pour configurer mon 13 00:01:00,460 --> 00:01:02,270 objet feuille de style. 14 00:01:02,470 --> 00:01:10,510 Donc pour cela, ajoutons des styles ici avec la feuille de style. créer, passer un objet à cette feuille de style. créer une méthode et bien 15 00:01:11,140 --> 00:01:16,840 sûr prendre les styles de l'application. Fichier js, ce serait le conteneur d'entrée et l'entrée, donc 16 00:01:16,840 --> 00:01:21,540 coupez les deux pour que seul l'écran reste ici et en arrière dans la saisie d'objectif, je vais ajouter 17 00:01:21,730 --> 00:01:28,510 les deux ici à ma feuille de style pour que cela fonctionne à nouveau. Ce qui ne fonctionnera pas en ce moment, c'est que 18 00:01:28,510 --> 00:01:37,840 lorsque nous appuyez sur le bouton, que nous ajoutons cela parce qu'ici, nous n'avons pas l'état dans la saisie d'objectif et lorsque je tape sur le bouton, je 19 00:01:37,870 --> 00:01:42,790 veux réellement faire quelque chose dans l'application. js. 20 00:01:42,910 --> 00:01:49,480 Donc, tout d'abord, nous devons diviser l'État. L'objectif saisi ne doit pas être géré dans l'application. js mais il doit être géré 21 00:01:49,480 --> 00:01:54,040 dans la saisie de l'objectif, car c'est là que nous avons la saisie de 22 00:01:54,040 --> 00:02:01,360 texte à la fin, c'est là que l'utilisateur entre dans l'objectif. Ajoutons donc importation useState ici dans l'entrée d'objectif, puis ajoutons ici notre 23 00:02:01,360 --> 00:02:08,950 logique de gestion d'état avec l'objectif entré et définissons l'objectif entré que nous obtenons de useState que nous avons initialisé avec une chaîne vide, ajoutons-le 24 00:02:08,950 --> 00:02:14,650 ici à l'entrée d'objectif et à partir de l'application. fichier js, je vais également prendre le gestionnaire d'entrée 25 00:02:14,650 --> 00:02:18,780 d'objectif, le couper à partir de là et l'ajouter à l'entrée d'objectif ici, donc 26 00:02:18,820 --> 00:02:24,910 cette fonction dans une fonction que nous nous connectons à onChangeText et maintenant avec cela, la récupération de l'entrée utilisateur 27 00:02:24,910 --> 00:02:26,490 devrait fonctionner à nouveau. 28 00:02:26,740 --> 00:02:32,660 Maintenant, pour le bouton, lorsque nous appuyons dessus, je veux déclencher une fonction dans l'application. js, je veux déclencher le gestionnaire d'ajout d'objectifs et cette fonction doit rester 29 00:02:32,680 --> 00:02:38,360 ici car j'ai besoin de gérer la liste ici parce que l'application. Le fichier js est le seul composant 30 00:02:38,560 --> 00:02:44,350 qui aura accès à l'entrée d'objectif et à la FlatList où nous produisons les objectifs et en 31 00:02:44,350 --> 00:02:52,950 parlant de cela, nous pouvons déjà y importer des entrées d'objectif dans l'application. js à partir de l'entrée d'objectif des composants et ajouter 32 00:02:52,950 --> 00:03:02,010 une entrée d'objectif en tant que composant ici au-dessus de la FlatList mais encore une fois, nous devons maintenant pouvoir savoir 33 00:03:02,010 --> 00:03:06,790 quand un bouton est enfoncé dans ce composant et dans React, 34 00:03:06,790 --> 00:03:14,740 vous le faites en passant la fonction que l'enfant Le composant doit éventuellement s'exécuter en tant que prop au 35 00:03:14,740 --> 00:03:16,150 composant enfant. 36 00:03:16,150 --> 00:03:20,850 Donc ici, nous pourrions ajouter AddGoal, ce nom dépend entièrement de vous, c'est un 37 00:03:20,860 --> 00:03:22,230 accessoire que vous 38 00:03:22,840 --> 00:03:25,990 définissez et cela pointe vers le gestionnaire de buts. 39 00:03:26,030 --> 00:03:32,980 Cela seul ne fera rien mais onAddGoal sera désormais reçu comme un accessoire à l'intérieur de l'entrée d'objectif et il pointera sur 40 00:03:32,980 --> 00:03:37,520 une fonction, ce qui signifie que nous pouvons l'exécuter en tant que fonction là-bas. 41 00:03:37,540 --> 00:03:41,550 Donc, dans la saisie des objectifs, là-bas sous presse, je 42 00:03:41,950 --> 00:03:45,990 peux simplement pointer vers l'hélice. onAddGoal, non? 43 00:03:46,000 --> 00:03:51,370 Parce que onAddGoal est le nom de l'accessoire que je configure ici dans l'application. fichier js, qui est reçu à l'intérieur de 44 00:03:51,370 --> 00:03:57,430 l'entrée d'objectif sur l'objet d'accessoires que nous obtenons dans chaque composant fonctionnel et onAddGoal pointe sur une fonction, afin 45 00:03:57,430 --> 00:04:00,200 que nous puissions le transmettre à onPress afin 46 00:04:00,330 --> 00:04:05,630 que onPress ou React Native sache qu'il doit donc appeler cette fonction lorsque nous appuyons sur 47 00:04:05,630 --> 00:04:06,470 le bouton, 48 00:04:06,550 --> 00:04:09,430 c'est comme ça que vous faites dans React Native. 49 00:04:09,430 --> 00:04:17,150 Nous aurions toujours un problème parce que dans l'ajout d'un gestionnaire d'objectifs, je fais référence à l'objectif entré et qui était précédemment géré ici, 50 00:04:17,170 --> 00:04:19,670 mais qui ne l'est plus, nous avons géré 51 00:04:19,750 --> 00:04:25,540 l'objectif entré, qui est la saisie de texte entrée par l'utilisateur dans l'objectif. entrée maintenant et non dans 52 00:04:25,550 --> 00:04:26,340 l'application. js. 53 00:04:26,950 --> 00:04:32,620 Donc, le gestionnaire d'ajout d'objectif devrait en fait maintenant recevoir un argument qui est le titre de l'objectif ou tout ce que 54 00:04:32,620 --> 00:04:33,160 vous 55 00:04:33,190 --> 00:04:37,530 voulez lui donner, ce nom dépend de vous et c'est ce que nous stockons comme valeur ici. 56 00:04:37,540 --> 00:04:47,700 Maintenant, nous devons nous assurer que nous transmettons cet argument quand on ajoute un objectif est exécuté dans l'entrée d'objectif. 57 00:04:48,870 --> 00:04:55,350 Donc, cela se produit ici sur une presse et là, nous indiquons simplement cela pour configurer également un argument 58 00:04:55,350 --> 00:04:58,410 qui devrait finalement être transmis, nous obtenons deux 59 00:04:58,410 --> 00:05:02,620 options, la première est que nous configurons une fonction de flèche anonyme ici. 60 00:05:02,640 --> 00:05:08,250 Maintenant, cette fonction de flèche sera finalement exécutée et donc maintenant nous pouvons ajouter des 61 00:05:08,250 --> 00:05:09,930 parenthèses ici car cela 62 00:05:09,960 --> 00:05:16,050 ne sera plus exécuté lorsque cela sera rendu en premier, mais cette fonction de flèche sera enregistrée 63 00:05:16,050 --> 00:05:17,730 comme une fonction à 64 00:05:17,730 --> 00:05:25,230 exécuter pour onPress et maintenant ici dans onAddGoal, nous pouvons transmettre l'objectif entré par exemple, cela fonctionnerait ou bien, nous n'utilisons 65 00:05:25,290 --> 00:05:30,690 pas cette approche de fonction de flèche anonyme et donc nous ne pouvons pas ajouter 66 00:05:30,690 --> 00:05:38,790 de parenthèses ici mais nous pouvons ensuite utiliser une autre fonctionnalité Javascript, sur les fonctions que nous pouvons appeler lier à préconfigurer certains 67 00:05:39,120 --> 00:05:43,560 arguments qui devraient éventuellement être transmis lors de l'exécution de cette fonction. 68 00:05:43,560 --> 00:05:47,190 Le premier argument est toujours à quoi le mot-clé this doit faire référence. 69 00:05:47,190 --> 00:05:52,680 Cela n'a pas d'importance pour nous ici, nous pouvons donc simplement l'écrire, mais le deuxième argument ici ou 70 00:05:52,680 --> 00:05:58,440 tous les autres arguments par la suite seront en fait les arguments reçus par cette fonction lorsqu'elle est appelée et 71 00:05:58,440 --> 00:06:00,270 appelée sur une pression de bouton. 72 00:06:00,270 --> 00:06:06,210 Ce sont donc maintenant les arguments qui sont transmis à la fonction onAddGoal qui à la fin est 73 00:06:06,210 --> 00:06:10,600 juste notre fonction de gestionnaire d'ajout d'objectif et là, nous avons besoin du 74 00:06:10,620 --> 00:06:12,080 titre de l'objectif, nous 75 00:06:12,120 --> 00:06:17,740 devons donc le transmettre, donc ici, je peux maintenant configurer la saisie objectif comme argument à transmettre 76 00:06:17,940 --> 00:06:20,760 et c'est la syntaxe Javascript normale vanille ici. 77 00:06:21,850 --> 00:06:24,740 Et maintenant, avec ça, ça devient rendu, ça a l'air 78 00:06:24,740 --> 00:06:25,920 bien et si 79 00:06:26,090 --> 00:06:31,340 j'entre, apprends React Native, j'obtiens toujours la sortie ici. Pour que tout fonctionne, mais maintenant nous 80 00:06:31,340 --> 00:06:36,770 divisons cette application en plusieurs composants, ce que vous faites généralement dans les applications React et React 81 00:06:36,770 --> 00:06:42,740 Native, tout comme vous le faites dans React pour les applications Web, car cela maintient vos composants plus légers, 82 00:06:42,800 --> 00:06:46,550 plus ciblés et votre code plus organisé et plus facile à comprendre.