Nous avons donc passé un peu de temps sur l'entrée, mais la gestion des entrées
utilisateur est importante, vous voulez le faire d'une manière qui semble
naturelle à l'utilisateur, qui ait
du sens pour l'utilisateur et où vous ne ferez jamais confiance à votre utilisateur et vous validerez toujours ce
l'utilisateur entre et nous approfondirons cette opération de validation,
l'entrée de l'utilisateur remettant des choses plus tard dans le cours où nous acceptons également des entrées plus
complexes qu'un
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
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
progresser aussi avec notre jeu car nous sommes un peu coincés
ici, ce sont toutes des étapes importantes mais nous ne progressons pas vraiment avec notre jeu ou avec notre application ici .
Alors assurons-nous que nous le faisons dans une prochaine étape et pour cela,
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
sera simple. Lorsque vous
appuyez dessus, je souhaite simplement réinitialiser la valeur entrée. Je vais donc enregistrer une nouvelle fonction là-haut dans
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
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
clair que ceux-ci gèrent certains événements, ce n'est
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
React Native.
Ce sera une fonction qui appelle ensuite définir la valeur entrée qui est notre fonction de réglage d'état ici
pour mettre à jour l'état que nous réinjectons dans l'entrée et le définir sur
une chaîne vide et oui, avec cela, nous pouvons le connecter au bouton de réinitialisation ici, onPress devrait maintenant simplement exécuter
le gestionnaire d'entrée de réinitialisation comme ça.
Essayons
rapidement, entrons quelque chose ici, réinitialisons
et c'est parti,
ça a l'air bien
et assurez-vous également
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
le jeu immédiatement ici, mais aussi juste pour le pratiquer,
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,
voulez-vous démarrer
un message, où l'utilisateur obtient alors un bouton pour démarrer le jeu, juste une étape supplémentaire donc nous avons
un peu de pratique supplémentaire ici. Pour cela, je vais
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
pouvons changer cela et nous voulons pouvoir obtenir l'état actuel.
Nous obtenons donc ici si l'utilisateur a confirmé ou non et nous
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,
je mets confirm à true, sur le gestionnaire d'entrée de réinitialisation d'ailleurs, je le mets à faux parce que si
l'utilisateur clique sur reset, l'utilisateur doit certainement confirmer les valeurs, nous devons donc le réinitialiser,
puis ici dans le gestionnaire d'entrée de confirmation, je
veux aussi faire deux choses différentes, deux autres choses.
L'une consiste à réinitialiser la valeur entrée, mais également à enregistrer la valeur entrée comme valeur avec laquelle
nous commencerions le jeu.
Nous pouvons le faire avec
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
nombre sélectionné et qui devrait maintenant aussi être vraiment un nombre et non du texte.
Donc, ici, nous avons le numéro sélectionné et une fonction pour
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é
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
sera fait que dans le prochain cycle de rendu et pas immédiatement après l'exécution de cette ligne.
Donc, nous pouvons toujours exécuter en toute sécurité ou accéder à cette valeur entrée par la
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
toujours accéder la valeur
entrée ici même si nous la réinitialisons parce que cette chose de réinitialisation ici sera essentiellement mise en
file d'attente par React et ne sera traitée que la prochaine fois que le composant sera rendu par
la
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é
à la valeur entrée ici, mais nous pouvons également le faire avant de
le réinitialiser, peu importe.
La chose importante est cependant que nous analysons ceci comme un entier afin que nous convertissions ce texte en nombre
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
est ce numéro analysé et avant de
faire quoi que ce soit, je veux vérifier si le numéro choisi n'est pas un nombre qui est une valeur Javascript
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
si le nombre choisi est plus petit ou égal à zéro.
Si c'est le cas, je veux juste revenir,
je ne veux
pas continuer, donc return terminera l'exécution de la fonction et ne confirmera pas, ne l'utilisera pas comme
valeur car la valeur n'est
pas valide, seuls les nombres positifs sont autorisés et aucun numéro invalide n'est autorisé.
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
pas autorisé non plus, je veux avoir
un nombre entre 1 et 99 et ce devrait être un nombre. Si cela ne correspond pas à ces critères, nous reviendrons,
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
d'état définis seront regroupés et le composant sera restitué et nous aurons notre nouvel état
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
bouton de confirmation ici et maintenant, certains commentaires visuels seraient également intéressants de voir que la
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
mais aussi afficher une alerte.
Maintenant, commençons peut-être par les commentaires avant de travailler ensuite sur l'alerte. Pour les commentaires, ci-dessous cette
fonction mais à l'intérieur de notre composant fonctionnel, je veux vérifier si nous avons confirmé et ensuite définir
un contenu spécial qui devrait être sorti.
Donc, ici, nous avons la sortie confirmée qui n'est normalement
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
entré et donnons à l'utilisateur le bouton de démarrage du jeu.
Maintenant, juste pour voir si cela fonctionne, allons-y avec du texte ici et disons simplement le numéro choisi
et sortir le numéro sélectionné ici, numéro sélectionné,
c'est notre état que nous gérons ici.
Donc, puisque nous appelons ensemble confirmé et ainsi de suite, le composant sera rendu à nouveau lorsque cela
est choisi, donc toute cette fonction de composant s'exécutera à nouveau et cela signifie que confirmé sera
alors vrai pour cette prochaine exécution parce que nous le définissons ici et nous allons
donc définir
la sortie confirmée comme étant ce texte et maintenant nous pouvons ajouter la sortie confirmée, disons ici en dessous de notre carte.
Alors là, je veux sortir la sortie confirmée et c'est soit
indéfini,
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
le numéro.
Si j'entre quelque chose d'invalide comme zéro, nous ne
le voyons pas, donc notre chèque semble fonctionner et un numéro valide est cependant émis.
Maintenant, ce n'est pas le design final que je veux avoir, mais cela prouve que cela fonctionne.
Avant de finaliser cette conception, assurez-vous que nous affichons également une alerte si quelque chose d'invalide est entré.