Pour produire nos propres objectifs.
Je vais ajouter un nouveau composant dans le dossier des composants et le garder gérable.
Je vais en fait créer un nouveau sous-dossier pour chaque composant.
Ce n'est pas un must, mais j'aime personnellement le faire parce que je peux rapidement trouver tous mes composants.
Bien sûr, vous devez maintenant ajuster votre importation ici en abcès.
Mon idée l'a fait automatiquement au cas où cela ne se produirait pas.
Assurez-vous d'ajuster l'importation de votre liste d'objectifs pour refléter cela dans U.
Dossier.
J'ai ajouté.
Et puis il ajoutera un nouveau composant objectif ici dans le dossier des composants ainsi que là-dedans.
Ajoutez un nouveau fichier jazz d'objectif et un nouvel objectif.
Voyez-nous comme l'automne.
Si vous souhaitez appliquer un style maintenant dans un nouveau fichier jazz d'or, nous devons tout d'abord importer réagir
de réagir.
Vous devez toujours le faire.
Sinon, vous ne pouvez pas utiliser J comme X dans ce fichier car gardez à l'esprit que J comme exis est traduit pour réagir à la création de
l'élément.
Et puis ici, j'ai mon nouveau composant objectif ici.
Nous pourrions accepter Propp spot tant que nous n'en avons pas besoin.
Nous n'avons pas à le faire.
Et puis j'exporte un nouvel objectif.
Maintenant, dans Abcess, je veux rendre un nouvel objectif, nous allons donc importer du nouvel or.
Encore une fois, le nom vous appartient, mais il doit commencer par un caractère de départ majuscule.
Et j'importe cela à partir des composants.
Nouveau but.
Et puis ici, nous pouvons rendre comme ci-dessus notre liste d'objectifs, disons comme ça.
Non, cela ne fonctionnerait pas car le nouvel objectif n'est pas encore un composant React valide car c'est une fonction en ce moment, mais ce
n'est pas une fonction qui fonctionne comme un composant React car il ne fait pas une chose cruciale.
Il ne revient pas à son X.
Revenons donc.
Je suis J is X ici et là pour garder les choses simples, le tout sur un forum.
Et dans ce forum, je vais ajouter un champ de saisie.
Tapez l'élément à fermeture automatique de texte dans HGL standard.
Cela ne doit pas être à fermeture automatique dans J is X.
Il doit être à fermeture automatique.
Et puis un bouton qui est de type soumettre.
Là où je dis à Gohl, un formulaire très simple, et si nous le sécurisons maintenant, vous devriez le voir ici.
Ajoutons maintenant un peu de style pour rendre ce look un peu plus joli pour papa et une classe pour former un nouvel or
tiret.
Et je vais importer le nouvel or voir en tant que fichier dans le nouveau fichier JavaScript or.
Et puis ici sur la nouvelle classe d'or, qui est ajoutée sur le formulaire tout à.
Une marge de deux REM dans toutes les directions et ligne de texte.
Pour que cela semble un peu plus agréable.
Et maintenant, nous pourrions également styliser l'entrée du bouton.
Mais je ne veux pas y consacrer trop de temps.
Nous allons donc laisser les choses telles quelles, en ce moment.
Au fait, lorsque vous cliquez sur le bouton, cette page se rechargera car en ce moment, la fonctionnalité de
navigateur par défaut se déclenchera.
C'est-à-dire que lorsqu'un clic sur un bouton off est cliqué dans un forum, une demande est envoyée au serveur qui
est servi sur cette page.
Mais ce n'est pas le comportement que nous voulons ici, car ici, je ne veux pas envoyer de demande à
un serveur parce que nous ne faisons rien du côté serveur.
Au lieu de cela, je veux gérer ce clic avec JavaScript et c'est la première chose que je ferai ici.
Voyons comment nous pouvons gérer les événements, car jusqu'à présent nous ne l'avons pas fait.
Je veux gérer l'événement de soumission de ce forum ici et réagir rend cela simple.
Nous pouvons ajouter des écouteurs d'événements à n'importe quel élément, non seulement au forum, mais à n'importe quel élément en ajoutant
des minuscules sur.
Et puis le nom de l'événement.
Non, tous les événements ne sont pas pris en charge sur chaque élément.
Mais ici, vous avez le HD par défaut, tous les éléments disponibles.
Ainsi, par exemple, dans un élément de forum, vous devez soumettre l'événement, soumettre sur un bouton.
Vous avez également sur clic.
Mais comme il s'agit d'un bouton dans un forum, il vaut mieux le manipuler sur le forum lui-même.
Maintenant, que passez-vous comme valeur à Enns up Mido comme valeur?
Vous devez passer une fonction qui doit être déclenchée lorsque cet événement se produit.
Donc, un pointeur sur une fonction.
Vous pourriez faire cette année avec des accolades et une fonction en ligne anonyme.
Mais je n'aime pas trop ça.
Au lieu de cela, je vais créer une nouvelle fonction ici.
Et en JavaScript, vous pouvez créer des fonctions et des fonctions.
Donc, au lieu de la nouvelle fonction objectif, ce qu'elle est toujours, je peux finalement créer une nouvelle fonction.
Je vais créer mon.
Au nom du gardien de but, la nomination vous appartient.
Mais j'ai aimé son nom d'avoir Handler à la fin de mon nom de funks.
S'il s'agit d'une fonction qui est déclenchée lors d'un événement.
C'est donc une fonction dans ce cas, je vais à nouveau utiliser une fonction de flèche, ce
qui n'est pas indispensable, mais j'utiliserai uniquement les fonctions de flèche ici et Enns up Mitt peut maintenant pointer vers AD Gohl Handler.
Ne l'exécutez pas ici, alors n'ajoutez pas de parenthèses.
Au lieu de cela, vous souhaitez simplement pointer la fonction afin que le navigateur et réagir dans un effort commun puissent
exécuter un dysfonctionnement pour vous.
Quand l'événement de soumission se produit-il?
Maintenant, cette fonction obtiendra un objet d'événement, un paramètre d'événement transmis automatiquement par react et ensuite, par exemple, nous pouvons appeler prevent
default, ce qui empêche le navigateur par défaut d'envoyer une demande à un serveur principal, ce qu'il ne devrait pas
faire ici parce que nous 'ne gère pas cela du côté serveur ici.
Notre serveur ne sert que ce fichier HMO d'index unique.
Il n'a aucune logique pour gérer les soumissions.
Au lieu de cela, je veux le gérer ici en JavaScript sur le front-end.
Dans mon application REACT et pour l'instant je vais ignorer ce que l'utilisateur a entré ici et je
vais simplement créer un objectif factice.
Et je veux passer cet objectif factice à l'appli G. S. et l'ajouter à mon noyau Scholes ici pour qu'il soit ensuite
rendu ici.
Maintenant, étape par étape.
Nous pouvons bien sûr créer un nouvel objectif Dharmic.
Dans cet article, Hanovre.
En ajoutant ici une nouvelle constante d'objectif, qui est un objet JavaScript, l'idée ici pourrait être un nombre
aléatoire.
Avec mothe aléatoire.
Bien sûr, ce n'est pas vraiment un moi unique. RÉ. , mais c'est assez bon et je vais le convertir en chaîne.
C'est assez bon pour notre application de démonstration ici.
Je veux dire.
Et puis le texte ici plus tard sera le texte saisi par l'utilisateur ici.
Pour l'instant, juste un texte factice.
Mon nouvel objectif.
Alors maintenant, nous avons le nouvel objectif ici.
Et, bien sûr, nous pouvons verrouiller la console pour voir que tout fonctionne jusqu'à ce point.
Donc, si nous enregistrons cela.
Nous voyons notre formulaire ici.
Et si vous cliquez sur ajouter un objectif, la page ne se rechargera pas.
Mais au lieu de cela, nous voyons l'objectif du timbre ici.
Pourrait bien sûr créer plusieurs objectifs.
Mais pour le moment, ils ne sont pas ajoutés à cette liste.
Pour ajouter à la liste, nous devons maintenant extraire cet objectif du nouveau composant d'objectif vers le composant d'application.
Maintenant, avant d'apprendre, nous pouvons passer l'état de notre série d'accessoires.
Mais c'était de l'application à la liste des objectifs.
Donc, pour un composant de niveau inférieur, un composant qui est inclus une application.
Maintenant, c'est l'autre sens.
Nous voulons transmettre les données du nouvel objectif au composant parent.
Donc, le composant qui inclut le nouveau composant objectif.
Comment cela marche-t-il?