Il y a donc eu beaucoup de discussions, beaucoup de choses se font,
maintenant il est vraiment temps de faire fonctionner ce bouton et ajoutons un objectif ici,
à droite et
pour cela, nous devons découvrir ce que l'utilisateur a entré et par la suite, bien sûr écoutez un
clic sur le bouton, puis ajoutez l'objectif entré à un tableau d'objectifs que nous devons gérer quelque part, que nous pouvons ensuite afficher
là-bas dans cette vue de dessous, à droite, c'est
ce
que nous devons faire. Maintenant, dans ce cours,
je n'utiliserai des composants fonctionnels qu'avec la fonction React hooks qui est relativement nouvelle, donc si
vous ne connaissez pas encore React hooks, apprenez-en tout d'abord, par exemple dans mon React Complete
Guide,
je couvre en détail mais vous trouverez ci-joint quelques autres ressources qui vous permettront
de démarrer avec les hooks React, car nous aurons besoin des hooks React pour, par exemple, obtenir l'entrée utilisateur.
Nous avons utilisé le crochet useState pour ce que nous importons de React, non pas de
React Native mais de
React, c'est une fonctionnalité principale de React et puis ici dans ce composant fonctionnel, dans ce composant d'application, nous pouvons obtenir l'objectif
entré et également obtenir l'ensemble fonction d'objectif entrée pour mettre à jour l'état à l'aide de useState et par défaut, nous avons
un état initial qui est une chaîne vide car l'utilisateur n'a rien entré au début.
Maintenant, nous pouvons le lier à
la saisie de texte, ce qui signifie que lorsque l'utilisateur tape un caractère, nous voulons mettre à jour notre état
et enregistrer le texte entré dans l'état ici auquel nous pouvons ensuite accéder via l'objectif entré
et nous passerons l'objectif entré retour dans la saisie de texte. C'est cette liaison bidirectionnelle, c'est un soi-disant composant contrôlé que vous connaissez également
de React pour le Web avec des éléments d'entrée HTML normaux.
Nous pouvons donc ici écouter onChangeText, un accessoire fourni par la saisie de texte qui prend une
fonction qui s'exécutera pour chaque frappe.
Maintenant, nous pourrions fournir une fonction en ligne ici, mais nous pouvons également configurer une fonction
distincte pour avoir un peu de code plus propre et vous pouvez avoir une fonction dans une fonction
et nous devons l'avoir ici, afin que nous puissions utiliser notre état ou définissez la fonction d'objectif entrée ici, en ajoutant simplement une nouvelle fonction ici, le gestionnaire
d'entrée d'objectif pourrait être un nom, mais le nom dépend de vous. Dans cette fonction, nous obtiendrons automatiquement le texte saisi,
qui sera transmis par React ou par React Native ici et nous pouvons alors appeler définir l'objectif saisi et transmettre le
texte saisi en tant que valeur car le texte saisi ici sera déjà un chaîne car nous connectons
le gestionnaire d'entrée d'objectif à onChangeText en le pointant simplement ici. Maintenant, c'est important, n'ajoutez pas de parenthèses là-bas, car
cela exécuterait cette fonction lorsque ce code serait analysé, donc lorsque l'interface utilisateur
serait rendue pour la première fois. Cependant, vous ne voulez pas l'exécuter immédiatement,
vous voulez l'exécuter à chaque frappe et par conséquent, vous prenez simplement le nom de la fonction, vous
passez ce nom de la fonction à onChangeText et cela indique effectivement à React Native, hé c'est le Je
devrais exécuter la fonction pour chaque frappe, donc n'ajoutez pas de parenthèses ici pour que cela puisse fonctionner à chaque frappe.
Maintenant, au lieu de cette syntaxe de fonction, vous pouvez également utiliser une syntaxe différente qui
est celle que j'utiliserai tout au long du cours, où vous créez une constante avec ce nom ici, puis
la valeur de cette constante après le signe égal est simplement un fonction en utilisant cette syntaxe de fonction flèche, alors voici votre
liste d'arguments et voici le corps de la fonction. C'est la syntaxe Javascript normale, elle est supportée par
le code Javascript React Native est capable de s'exécuter et donc c'est la syntaxe que j'utiliserai,
vous la connectez à onChangeText exactement de la même manière qu'auparavant. Bon, maintenant nous avons cette fonction connectée, nous mettons
à jour notre état avec tout ce que l'utilisateur a entré
à chaque frappe, maintenant nous devons également retransmettre ce texte dans la saisie de texte, afin qu'il s'affiche correctement
en liant simplement la propriété value à objectif entré, donc à notre état qui changera à chaque frappe.
Et avec cela, nous avons accès à l'entrée utilisateur, car elle sera
désormais toujours stockée dans un objectif entré. Maintenant, lorsque l'utilisateur appuie sur le bouton, nous voulons utiliser cet
objectif entré, donc pour cela je vais ajouter une autre fonction ici, ajouter un gestionnaire d'objectif et c'est juste une convention de dénomination que j'utilise
pour ces fonctions ici, vous pouvez les nommer comme bon vous semble vous voulez, quoi que vous soyez habitué
à partir de vos applications React, à la fin, le nom de la fonction devrait simplement décrire ce qui va se passer et qu'ici,
il faudra appuyer sur ce bouton qui, à la fin, ajoutera un objectif. Ici, la fonction ne prendra aucun argument mais dans le corps de la fonction,
je veux ajouter mon objectif entré à une liste d'objectifs et nous n'avons pas encore de liste, donc pour l'instant ce
que je fais ici est le journal de la console, qui est pris en charge dans React Native, entrée d'objectif pour qu'au moins nous voyions que
cela a été enregistré correctement et que cette fonction est exécutée. Pour que cela s'exécute, nous devons
le connecter au bouton, là, nous pouvons ajouter l'accessoire onPress et pointer vers le gestionnaire
d'ajout d'objectifs, à nouveau sans parenthèses, afin que cela ne s'exécute pas immédiatement, mais uniquement lorsqu'une pression se produit.
Et maintenant, sauvegardons tout cela et revenons en arrière et entrons peut-être pour apprendre React Native et la bonne chose est que vous pouvez utiliser votre vrai
clavier ici et appuyer sur ajouter et vous devriez voir ici dans votre terminal ce journal, vous verrez également ceci d'ailleurs dans
vos outils de développement expo ici dans l'onglet navigateur. Là, si vous cliquez sur l'un des
appareils connectés, celui où vous cliquez simplement sur le bouton dans
mon cas, l'appareil Android, puis en bas, vous verrez également Learn React Native.
Et bien sûr, cela fonctionne également sur iOS, apprenez tout sur React Native, si nous saisissons cela ici et cliquez sur ajouter, nous voyons
également que vous êtes connecté ici et que dans les outils de développement expo, si nous cliquons sur l'iPhone à la tout en
bas, nous voyons ce journal. D'accord, nous obtenons l'entrée utilisateur,
nous la stockons, nous la consignons dans la console, bien sûr, nous ne voulons
pas la consigner dans le journal, nous voulons la produire sous notre entrée ici à la place, nous
voulons un liste de nos objectifs sous cette zone de saisie. Donc, pour cela, nous avons besoin de cette deuxième vue ici qui devrait produire notre liste d'articles.
Donc ici entre les balises d'ouverture et de fermeture, je veux sortir tous les éléments que nous avons
ajoutés, tous les objectifs que nous avons ajoutés. Pour cela, nous devons d'abord gérer nos objectifs et
nous pouvons configurer un autre état pour celui qui est initialement un tableau vide, donc je passe un tableau
vide comme valeur à utiliser State et là, nous avons nos objectifs de cours et un ensemble d'objectifs de cours une fonction.
Maintenant, ces noms sont toujours à vous, mais ils devraient décrire ce qui est dans votre état et comment vous pouvez
le mettre à jour.
Alors maintenant, ici, lorsque nous ajoutons un objectif, je veux mettre à jour mes objectifs de cours pour ajouter le
nouvel objectif et pour cela, je peux appeler définir des objectifs de cours et maintenant définir des objectifs de cours dans un nouveau tableau où je prends mes anciens objectifs de cours et ajoute
un nouveau.
Maintenant, c'est la syntaxe que vous ne connaissez peut-être pas, c'est
ce que l'on appelle l'opérateur de propagation, c'est une fonctionnalité Javascript qui prend un tableau existant et les objectifs
du cours est un tableau, c'est notre instantané de l'état actuel avant la mise à jour et en extrait tous les éléments tableau, puis les ajoute
ici à un nouveau tableau, c'est pourquoi j'ai les crochets environnants, sans ces crochets environnants, cela ne fonctionnerait
pas,
mais maintenant nous créons un nouveau tableau et nous ajoutons tous les éléments de l'ancien tableau et maintenant nous
pouvons ajoutez également un nouvel élément.
Donc ici, j'ajoute une virgule pour ajouter
un élément supplémentaire après tous les éléments que je retire ici et l'élément que j'ajoute ici est bien sûr mon objectif entré.
Alors maintenant, nous mettons à jour notre liste d'objectifs avec l'ancienne liste
d'objectifs, initialement une liste vide, mais cela augmentera au fil du temps car nous ajoutons également
un nouvel objectif lorsque nous appuyons sur ce bouton. Maintenant, une petite note latérale, lorsque vous travaillez avec des objectifs
de cours définis, les objectifs de cours sont notre état précédent et la
façon dont React met à jour l'état, cela devrait toujours être votre instantané d'état le plus récent mais ce n'est pas garanti
à 100%, pour avoir cette garantie à 100% , lorsque vous mettez à jour
votre état sur la base de l'ancien état, vous pouvez utiliser la forme de fonction de cette fonction définie où vous
ne
transmettez pas la valeur de votre nouvel état ici mais à la place, vous la transmettez dans une fonction, généralement une fonction
anonyme où vous obtenir votre état actuel ou vos objectifs actuels, donc votre instantané d'état actuel, puis vous retournez votre valeur mise
à jour, alors ici je renvoie mon tableau mis à jour avec cette syntaxe de fonction de flèche en ligne où si vous n'avez
qu'une seule expression, vous pouvez omettre les accolades et les accolades déclaration de retour et entrez simplement la
valeur que vous souhaitez retourner et
elle sera retournée et c'est tout Javascript normal ici, rien de spécifique à React Native.
Alors ici, je prends ensuite mes objectifs actuels, puis j'ajoute mon objectif entré. Cette syntaxe est un peu meilleure, l'autre syntaxe aurait
également fonctionné mais cela est garanti de toujours fonctionner car React Native
ira toujours de l'avant et vous donnera la garantie, le dernier instantané d'état avant d'appliquer ensuite votre
changement d'état ici.
Maintenant, c'est très bien, nous allons maintenant avoir une liste, un éventail d'objectifs gérés ici. Comment pouvons-nous maintenant produire cela?