Formulieren en gebeurtenissen in React begrijpen

In deze tutorial leer je over vormen en gebeurtenissen in React. We beginnen met het maken van een eenvoudige React-gebaseerde app en voegen vervolgens een formulier en enkele elementen toe. Vervolgens zullen we zien hoe gebeurtenissen aan de formulierelementen kunnen worden toegevoegd.

Als je een beginner bent met React, raad ik je aan eerst de introductietraining over React te lezen om aan de slag te gaan.

Ermee beginnen

Laten we beginnen met het opzetten van onze React-webapplicatie. Maak een projectmap met de naam ReactFormApp. Binnen ReactFormApp, maak een bestand aan met de naam index.html en voeg de volgende HTML-code toe:

Initialiseer het project met Node Package Manager (npm).

npm init

Vul de vereiste gegevens in en u moet de package.json bestand in de ReactFormApp map.

"naam": "reactformapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \" Fout : geen test opgegeven \ "&& exit 1", "author": "", "license": "ISC"

Installeer de Reageer en reactie-dom afhankelijkheden met behulp van npm.

npm install react-dom reageren - opslaan

Installeer het vereiste babel-pakket met behulp van npm en sla het op in package.json het dossier.

npm installeren --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-reageren babel-preset-es2015

Babel pakketten zijn vereist om de JSX-code naar JavaScript te transformeren.

Maak een webpack-configuratiebestand om de webpackconfiguraties af te handelen. Maak een bestand met de naam webpack.config.js en voeg de volgende configuraties toe:

module.exports = entry: './app.js', output: filename: 'bundle.js',, module: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [ ] = es2015 & presets [] = reageren ']

app.js is het bestand waar onze React-code zich zal bevinden. Maak een bestand met de naam app.js binnen in de ReactFormApp map. Importeer de vereiste reactieve bibliotheken in app.js. Maak een component genaamd App een div hebben met wat tekst. Render het onderdeel met behulp van de rendermethode. Hier is hoe de basis app.js bestand zou er als volgt uitzien:

import Reageren van 'reageren' importeren render uit 'react-dom' var App = React.createClass (render: function () return ( 
 TutsPlus - Welkom bij React Form App 
 ); ); renderen ((  ), Document.getElementById ( 'app'))

Sla de wijzigingen op en probeer de webpack-ontwikkelserver opnieuw te laden.

webpack-dev-server

Nadat de server opnieuw is opgestart, kunt u de React-app bekijken die wordt uitgevoerd op http: // localhost: 8080 /.

Een reactievorm maken

We hebben de standaard React-app in gebruik, laten we naar de volgende stap gaan en proberen een formuliercomponent te maken met behulp van de JSX-code in app.js.

Maak een component genaamd FormComp binnen app.js.

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

Binnen de renderfunctie voor FormComp definiëren we de HTML-code voor het maken van een formulier. We plaatsen een paar labels, invoervelden en een knop om te klikken. Hier is hoe het eruit ziet:

var FormComp = React.createClass (render: function () return ( 
 
TutsPlus - Formulier zelfstudie
 
 Voornaam:   
 Achternaam:   
  
 
 ); )

Geef de formuliercomponent weer FormComp om het formulier binnenin weer te geven index.html.

renderen ((  ), Document.getElementById ( 'app'))

Sla de wijzigingen op en start de webpackserver opnieuw op en u zou het formulier moeten kunnen bekijken.

Gebeurtenissen aan het formulier toevoegen

Onze React-vorm is in goede vorm. Om interactie mogelijk te maken, moeten we evenementen aan het formulier toevoegen. 

We beginnen met het toevoegen van toestandsvariabelen aan elk van de invoervakken, zodat we de waarden van de invoervakken kunnen lezen. Laten we de toestandsvariabelen instellen voor de voornaam en de laatste invoertekst.

Zorg ervoor dat u de beginstatus voor de bovenstaande variabelen instelt. Definieer de getInitialState functie binnen de FormComp component en initialiseer beide variabelen.

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

We moeten de on-change-gebeurtenis van de invoervakken afhandelen en de toestandsvariabelen toewijzen wanneer de waarde in de tekstvakken verandert. Dus definieer een onChange gebeurtenis op de invoervakken.

Definieer de onChange functies binnen de FormComp en stel de toestandsvariabelen in.

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

Laten we proberen de toestandsvariabelen weer te geven door ze te gebruiken. Binnen in de FormComp HTML, voeg het volgende element toe dat de toestandsvariabelen weergeeft.

Je volledige naam is 
 this.state.fName this.state.lName

Sla de wijzigingen op en start de webpack-server opnieuw op. Probeer wat tekst in te voeren in de tekstvakken voor de voor- en achternaam en je kunt de resultaten bekijken zodra je typt.

Laten we vervolgens een gebeurtenis bij de klik toevoegen aan de knop Verzenden die we op ons formulier hebben.

Definieer de handleClick functie binnen de FormComp component. Door op de knop Verzenden te klikken, voegen we zowel voornaam als achternaam samen en wordt de volledige naam in het formulier weergegeven. Hier is de handleClick functie:

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

Initialiseer ook de Naam variabele in de getInitialState functie.

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

Geef de aaneengesloten volledige naam weer in het HTML-formulier.

Je volledige naam is 
  This.state.Name

Hier is hoe de finale FormComp component ziet eruit:

var FormComp = React.createClass (getInitialState: function () return lName: ", fName:", Name: ";, handleFNameChange: function (event) 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);, render: function () retourneren ( 
 
TutsPlus - Formulier zelfstudie
 
 Voornaam:   
 Achternaam:   
  
 
Je volledige naam is 
  This.state.Name 
 ); )

Sla de bovenstaande wijzigingen op en start de ontwikkelserver opnieuw op. Voer beide namen in en druk op de verzendknop. De volledige naam moet worden weergegeven.

Inpakken

In deze zelfstudie van React hebt u geleerd hoe u aan de slag kunt met React-apps maken en hebt u de basisbegrippen geleerd over hoe u moet omgaan met formulieren en gebeurtenissen in een op React gebaseerde webapp. Ik hoop dat deze tutorial nuttig voor je zal zijn om te beginnen met het maken van React-gebaseerde apps.

Broncode van deze tutorial is beschikbaar op GitHub.

Laat ons uw mening, suggesties of eventuele correcties in de opmerkingen hieronder weten. Blijf deze ruimte bekijken voor meer React-tutorials.