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
nous devons également
faire est que nous devons nous assurer que lorsque nous ajoutons un nouvel objectif, le modal se ferme.
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
isAddMode que nous changeons lorsque nous cliquons sur ce bouton ici, le bouton ajouter un nouvel
objectif par
exemple et cette valeur d'état, isAddMode est transmis à l'entrée d'objectif où nous l'utilisons ensuite pour contrôler la
visibilité de le modal.
Donc, pour nous assurer que le modal disparaît, nous devons simplement changer à nouveau
isAddMode à l'intérieur de l'application. Fichier js car la nouvelle valeur sera alors automatiquement transmise à l'entrée d'objectif.
Donc, tout ce que nous avons à faire est d'ajouter un gestionnaire d'objectifs où nous définissons les objectifs du
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
deux états l'un après l'autre, il les regroupera
par lots, il ne restituera pas
le composant deux fois après le premier changement et après le deuxième changement, au lieu de cela, il s'appliquera essentiellement
tous les changements d'état à la fois et ne rendent le composant qu'une seule fois, ce qui bien
sûr
est bon, sinon nous aurions un cycle de restitution inutile là-bas
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
comme ceci et avec cela,
le modal devrait également disparaître si nous le définissons sur faux. Testons-le ici sur
iOS.
Si j'ajoute learn React Native ici, cliquez sur ajouter, cela disparaît
et maintenant j'apprends beaucoup plus, cela fonctionne aussi et je peux également
supprimer des éléments.
Maintenant, pour tester cela sur Android, même procédure que précédemment,
redémarrons réellement cela sur Android,
cliquez sur ajouter un nouvel objectif et découvrez React Native ici, cliquez sur ajouter et cela
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
une fois que nous avons terminé et en plus, je veux fournir un bouton d'annulation, de
sorte qu'au lieu d'ajouter, nous pourrions également annuler ici pour fermer le modal sans ajouter d'élément car pour
l'instant, ce n'est pas quelque chose qu'on peut faire.
Commençons par effacer notre entrée ici
après avoir entré quelque chose. Pour cela dans l'entrée d'objectif, à la fin, nous avons
cet objectif entré
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
ce bouton d'ajout et là, à la fin, nous déclenchons une fonction que nous obtenons à l'aide de l'accessoire onAddGoal.
Maintenant, pour effacer également notre entrée, ce que nous pouvons faire ici, c'est que nous pouvons ajouter
une fonction à l'intérieur du composant d'entrée d'objectif, ajouter un gestionnaire d'objectif ou tout ce que
vous voulez appeler, c'est une fonction qui ne doit prendre aucun argument et au final, c'est maintenant cette fonction que je
veux déclencher.
Je veux donc déclencher l'ajout de gestionnaires
d'objectifs, donc ma propre fonction dans ce composant. Maintenant ici, je veux appeler des accessoires sur AddGoal
sans lier ici, nous pouvons simplement l'appeler comme ça parce que lorsque cette fonction s'exécute, je veux l'exécuter, ici
nous passons juste un pointeur sur cette fonction sans parenthèses, alors ici
nous ne doit pas avoir de parenthèses pour ne pas l'exécuter trop tôt, ici nous avons
absolument besoin de parenthèses car cela ne s'exécute que lorsque cette fonction s'exécute et c'est à
ce moment que je veux déclencher la fonction
dans mon composant parent, donc dans le composant d'application ici. Et ici, sur onAddGoal, bien sûr, je veux toujours transmettre mon objectif
entré
ici, donc cet état, je veux le transmettre, mais par la suite, je veux également le supprimer.
Par la suite, je vais à nouveau
définir l'objectif entré sur une chaîne vide qui réinitialisera le texte que nous avons entré ici.
Voilà donc une chose,
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
avoir un titre d'annulation parce que c'est finalement ce que ce
bouton devrait faire et pour l'annuler bouton,
il peut
être agréable de ne pas avoir à utiliser la couleur bleue par défaut mais de changer cette
couleur et vous pouvez le faire en ajoutant ici la couleur prop, par exemple, nous
pourrions mettre cela en rouge ici parce que le rouge à mon avis est une belle couleur pour une annulation bouton.
Si nous enregistrons cela et que nous testons cela ici sur
iOS, nous voyons le bouton Annuler
et le bouton Ajouter et maintenant si j'apprends React Native ici et j'ajoute cela, cela est ajouté et si je rouvre
cela, vous voyez qu'il a été effacé et bien sûr, annuler ne fait rien car nous devons connecter annuler au composant
d'application où nous contrôlons la visibilité en contrôlant isAddMode.
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
long, je
veux juste être clair sur ce que cela fait et quand il est appelé.
Donc, ici, nous avons le gestionnaire supplémentaire d'annulation d'objectif et à la fin ici, nous pouvons simplement définir
isAddMode sur false qui
fermera le modal et bien sûr
nous ne faisons rien d'autre, nous ne changeons pas nos objectifs de cours parce que nous avons annulé
l'ajout et maintenant, nous pouvons le transmettre
à 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
dépend de vous, car il s'agit de votre
propre accessoire sur votre propre composant et j'ai transféré un pointeur à annuler le gestionnaire d'ajout d'objectif
à onCancel et maintenant à l'intérieur de l'entrée d'objectif, nous pouvons déclencher onCancel en appuyant sur ce bouton.
Alors ici, nous ajoutons onPress et nous voulons déclencher des accessoires. onCancel ici, donc la
fonction que nous recevons sur notre accessoire onCancel. Avec cela, le bouton d'annulation devrait fonctionner, oui
fonctionne très bien.
Maintenant, cela devrait aussi fonctionner sur Android,
mais pour
le tester, même procédure que toujours, fermons-le et
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
vide et annuler fonctionne également.
En ce qui concerne le style ici sur Android, ce serait bien d'avoir un peu d'espacement entre les
boutons ou en fait sur les deux plates-formes, peut-être que ces boutons sont assis côte à côte.