Förstå formulär och händelser i React

I den här handledningen lär du dig information om formulär och händelser i React. Vi börjar med att skapa en enkel React-baserad app och sedan lägga till ett formulär och några element. Då ser vi hur man lägger till händelser i formulärelementen.

Om du är nybörjare med React, skulle jag rekommendera att läsa den inledande handledningen om React för att komma igång.

Komma igång

Låt oss börja med att ställa in vår React-webbapplikation. Skapa en projektmapp som heter ReactFormApp. Inuti ReactFormApp, skapa en fil som heter index.html och lägg till följande HTML-kod:

Initiera projektet med Node Package Manager (npm).

npm init

Fyll i de uppgifter du behöver och du borde ha package.json filen inuti ReactFormApp mapp.

"namn": "reaktformapp", "version": "1.0.0", "beskrivning": "", "huvud": "index.js", "scripts": "test": "echo \" fel : inget test specificerat \ "&& avsluta 1", "författare": "", "licens": "ISC"

Installera reagera och reagerar-dom beroenden med hjälp av npm.

npm installera reagera reagera dom - save

Installera det nödvändiga babelpaketet med npm och spara det till package.json fil.

npm installera - save-dev webbpaket webpack-dev-server babel-core babel-loader babel-preset-reagerar babel-preset-es2015

babel paket krävs för att omvandla JSX-koden till JavaScript.

Skapa en webpack-konfigurationsfil för att hantera webpackkonfigurationerna. Skapa en fil som heter webpack.config.js och lägg till följande konfigurationer:

module.exports = entry: './app.js', output: filnamn: 'bundle.js',, modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? ] = es2015 och förinställningar [] = reagera ']

app.js är filen där vår React-kod kommer att ligga. Skapa en fil som heter app.js inuti ReactFormApp mapp. Importera de nödvändiga reaktionsbiblioteken i app.js. Skapa en komponent som heter App ha en div med lite text. Rendera komponenten med hjälp av renderingsmetoden. Så här är det grundläggande app.js filen skulle se ut:

import Reakt från "reagera" import render från "react-dom" var App = React.createClass (render: function () return ( 
 TutsPlus - Välkommen till React Form App 
 ); ); göra((  ), Document.getElementById ( 'app'))

Spara ändringarna och försök ladda om webpack-utvecklingsservern.

Webpack-dev-server

När servern har startats om igen ska du kunna se React-appen som körs på http: // localhost: 8080 /.

Skapa en reaktionsformulär

Vi har den grundläggande React-appen igång, Låt oss gå vidare till nästa steg och försöka skapa en formulärkomponent med hjälp av JSX-koden i app.js.

Skapa en komponent som heter FormComp inuti app.js.

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

Inom renderfunktionen för FormComp definierar vi HTML-koden för att skapa en form. Vi lägger in ett par etiketter, inmatningsrutor och en knapp för att klicka. Så här ser det ut:

var FormComp = React.createClass (render: function () return ( 
 
TutsPlus - React Form Tutorial
 
 Förnamn:   
 Efternamn:   
  
 
 ); )

Återge formulärkomponenten FormComp för att visa formuläret inuti index.html.

göra((  ), Document.getElementById ( 'app'))

Spara ändringarna och starta om webpackservern och du ska kunna se formuläret.

Lägga till händelser i formuläret

Vår reaktion är i god form. För att få det att fungera måste vi lägga till händelser i formuläret. 

Vi börjar med att lägga till statliga variabler på varje inmatningsrutan så att vi kan läsa värdena för inmatningsrutorna. Låt oss ange tillståndsvariablerna för förnamn och sista inmatningsfält.

Se till att du anger det ursprungliga tillståndet för ovanstående variabler. Definiera getInitialState funktionen inuti FormComp komponent och initiera båda variablerna.

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

Vi måste hantera händelsernas omväxlingshändelse och ange tillståndsvariablerna när värdet i textrutorna ändras. Definiera så en onChange händelse på ingångslådorna.

Definiera onChange funktioner inuti FormComp och ställ in tillståndsvariablerna.

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

Låt oss försöka göra statliga variabler genom att använda dem. Inuti FormComp HTML, lägg till följande element som ger statliga variabler.

Ditt fullständiga namn är 
 this.state.fName this.state.lName

Spara ändringarna och starta om webpackservern. Försök att skriva in text i förnamn och efternamn textrutor, och du ska kunna se resultaten så snart du skriver.

Låt oss sedan lägga till en klickhändelse på knappen Skicka som vi har på vår blankett.

Definiera handleClick funktionen inuti FormComp komponent. När vi klickar på Skicka-knappen sammanfogar vi både förnamn och efternamn och visar hela namnet inuti formuläret. Här är handleClick fungera:

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

Initiera också namn variabel i getInitialState fungera.

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

Visa det sammanförda fullständiga namnet i formuläret HTML.

Ditt fullständiga namn är 
 This.state.Name

Så här är finalen FormComp komponent ser ut:

var FormComp = React.createClass (getInitialState: function () return lName: ", fName:", Name: ";, handleFNameChange: funktion (händelse) this.setState (fName: event.target.value );, handtagLNameChange: funktion (händelse) this.setState (lName: event.target.value); handtagKlicka: funktion () var fullName = this.state.fName + "+ this.state.fName +" + this.state. lName; this.setState (Name: fullName);, render: function () return ( 
 
TutsPlus - React Form Tutorial
 
 Förnamn:   
 Efternamn:   
  
 
Ditt fullständiga namn är 
 This.state.Name 
 ); )

Spara ovanstående ändringar och starta om utvecklingsservern. Ange båda namnen och tryck på Skicka-knappen och hela namnet ska visas.

Wrapping It Up

I den här React-handledningen lärde du dig hur du började skapa React-appar och förstod de grundläggande begreppen om hur man hanterar former och händelser i en React-baserad webbapp. Jag hoppas att denna handledning kommer att vara till hjälp för dig när du kommer igång med att skapa React-baserade appar.

Källkod från denna handledning finns på GitHub.

Låt oss veta dina tankar, förslag eller eventuella korrigeringar i kommentarerna nedan. Fortsätt att titta på detta utrymme för mer React-tutorials.