Comprendre les formes et les événements dans React

Dans ce didacticiel, vous en apprendrez davantage sur les formulaires et les événements dans React. Nous allons commencer par créer une application simple basée sur React, puis ajouter un formulaire et des éléments. Ensuite, nous verrons comment ajouter des événements aux éléments de formulaire.

Si vous êtes débutant avec React, je vous recommande de lire le didacticiel d’introduction à React pour commencer..

Commencer

Commençons par configurer notre application Web React. Créez un dossier de projet appelé ReactFormApp. À l'intérieur ReactFormApp, créer un fichier appelé index.html et ajoutez le code HTML suivant:

  TutsPlus - React Forms & Events

Initialiser le projet à l'aide de Node Package Manager (npm).

npm init

Remplissez les informations requises et vous devriez avoir le package.json déposer à l'intérieur du ReactFormApp dossier.

"name": "reactformapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \" Erreur : aucun test spécifié \ "&& exit 1", "author": "", "license": "ISC"

Installez le réagir et réact-dom dépendances utilisant npm.

npm installer réagir réagir-dom --save

Installez le paquet babel requis à l’aide de npm et enregistrez-le sur le package.json fichier.

npm installer --save-dev webpack webpack-dev-serveur babel-core babel-loader babel-preset-réagir babel-preset-es2015

babel des packages sont requis pour transformer le code JSX en JavaScript.

Créez un fichier de configuration webpack pour gérer les configurations de webpack. Créez un fichier appelé webpack.config.js et ajoutez les configurations suivantes:

module.exports = entrée: './app.js', sortie: nom du fichier: 'bundle.js',, module: chargeurs: [exclude: / node_modules /, loader: 'babel-loader? presets [ ] = es2015 & préréglages [] = réagir ']

app.js est le fichier où notre code React résidera. Créez un fichier appelé app.js à l'intérieur de ReactFormApp dossier. Importer les bibliothèques de réactions requises dans app.js. Créez un composant appelé App avoir un div avec du texte. Rendez le composant en utilisant la méthode de rendu. Voici comment la base app.js le fichier aurait l'air:

import Réagir de 'réagir' importer rendre de 'réagir-dom' var App = React.createClass (render: function () return (  TutsPlus - Bienvenue sur React Form App 
 ) ); rendre((  ), document.getElementById ('app'))

Enregistrez les modifications et essayez de recharger le serveur de développement Webpack..

webpack-dev-server

Une fois le serveur redémarré, vous devriez pouvoir voir l’application React s'exécutant sur http: // localhost: 8080 /..

Créer un formulaire de réaction

L'application React de base est opérationnelle. Passons à l'étape suivante et essayons de créer un composant de formulaire à l'aide de code JSX. app.js.

Créez un composant appelé FormComp à l'intérieur app.js.

var FormComp = React.createClass (render: function () return ();)

Dans la fonction de rendu de FormComp, nous allons définir le code HTML pour la création d'un formulaire. Nous allons placer quelques étiquettes, des zones de saisie et un bouton sur lequel cliquer. Voici à quoi ça ressemble:

var FormComp = React.createClass (render: function () return (  TutsPlus - Didacticiel sur les formulaires à réagir
 
 Prénom:   
 Nom de famille:   
  
 
 ) )

Rendre le composant de formulaire FormComp pour afficher le formulaire à l'intérieur index.html.

rendre((  ), document.getElementById ('app'))

Enregistrez les modifications et redémarrez le serveur Webpack. Vous devriez pouvoir afficher le formulaire..

Ajout d'événements au formulaire

Notre forme React est en bonne forme. Pour le faire interagir, nous devons ajouter des événements au formulaire..

Nous allons commencer par ajouter des variables d'état sur chacune des zones de saisie afin de pouvoir lire les valeurs des zones de saisie. Définissons les variables d'état pour le prénom et les dernières zones de texte de saisie.

Assurez-vous de définir l'état initial pour les variables ci-dessus. Définir les getInitialState fonctionner à l'intérieur du FormComp composant et initialiser les deux variables.

getInitialState: function () return lName: ", fName:"; ,

Nous devons gérer l'événement de modification des zones de saisie et affecter les variables d'état lorsque la valeur dans les zones de texte change. Alors définissez un sur le changement événement sur les champs de saisie.

Définir les sur le changement fonctions à l'intérieur du FormComp et définir les variables d'état.

handleFNameChange: function (event) this.setState (fName: event.target.value); , handleLNameChange: function (event) this.setState (lName: event.target.value);

Essayons de rendre les variables d'état en les utilisant. À l'intérieur de FormComp HTML, ajoutez l'élément suivant rendant les variables d'état.

Votre nom complet est 
 this.state.fName this.state.lName

Enregistrez les modifications et redémarrez le serveur Webpack. Essayez de saisir du texte dans les zones de texte du prénom et du nom de famille, et vous devriez pouvoir afficher les résultats dès que vous tapez..

Ensuite, ajoutons un événement sur clic au bouton d'envoi que nous avons sur notre formulaire..

Définir les handleClick fonctionner à l'intérieur du FormComp composant. En cliquant sur le bouton Soumettre, nous concaténerons le prénom et le nom de famille et nous afficherons le nom complet dans le formulaire. Voici la handleClick une fonction:

handleClick: function () var fullName = this.state.fName + "+ this.state.lName; this.setState (Name: fullName);,

En outre, initialisez le prénom variable dans le getInitialState une fonction.

getInitialState: function () return lName: ", fName:", Nom: ";

Afficher le nom complet concaténé au format HTML.

Votre nom complet est 
 this.state.Name

Voici comment la finale FormComp composant ressemble:

var FormComp = React.createClass (getInitialState: function () return lName: ", fName:", Nom: ";, handleFNameChange: function (événement) this.setState (fName: event.target.value );, handleLNameChange: function (event) this.setState (lName: event.target.value);, handleClick: function () var fullName = this.state.fName + "+ this.state. lName; this.setState (Name: fullName);, rendu: function () return (  TutsPlus - Didacticiel sur les formulaires à réagir
 
 Prénom:   
 Nom de famille:   
  
 Votre nom complet est 
 this.state.Name 
 ) )

Enregistrez les modifications ci-dessus et redémarrez le serveur de développement. Entrez les deux noms et appuyez sur le bouton Soumettre. Le nom complet doit être affiché..

Envelopper

Dans ce tutoriel, vous avez appris à créer des applications React et à comprendre les concepts de base de la gestion des formulaires et des événements dans une application Web basée sur React. J'espère que ce tutoriel vous aidera à démarrer avec la création d'applications basées sur React.

Le code source de ce tutoriel est disponible sur GitHub.

Faites-nous savoir vos pensées, suggestions ou corrections dans les commentaires ci-dessous. Continuez à regarder cet espace pour plus de tutoriels React.

Code