Înțelegerea formularelor și a evenimentelor în Reacție

În acest tutorial, veți afla despre formularele și evenimentele din React. Vom începe prin crearea unei aplicații simple bazate pe React și apoi adăugăm un formular și câteva elemente. Atunci vom vedea cum să adăugăm evenimente la elementele formularului.

Dacă sunteți începător cu React, aș recomanda citirea tutorialului introductiv pe React pentru a începe.

Noțiuni de bază

Să începem prin crearea unei aplicații web React. Creați un director de proiect numit ReactFormApp. Interior ReactFormApp, creați un fișier numit index.html și adăugați următorul cod HTML:

Inițializați proiectul utilizând Node Package Manager (npm).

npm init

Completați detaliile necesare și ar trebui să aveți package.json fișier în interiorul ReactFormApp pliant.

"name": "reactformapp", "versiunea": "1.0.0", "descriere": "", "principal": "index.js", "scripts" : nu este specificat nici un test \ "&& ieșire 1", "autor": "", "licență": "ISC"

Instalați reacţiona și reacționează-dom dependente folosind npm.

npm instalează reacția react-dom --save

Instalați pachetul babel necesar utilizând npm și salvați-l la package.json fişier.

npm instalează -save-dev webpack webpack-dev-server babel-core babel-încărcător babel-preset-react babel-preset-es2015

hărmălaie pachetele sunt necesare pentru a transforma codul JSX în JavaScript.

Creați un fișier de configurare webpack pentru a gestiona configurațiile webpack. Creați un fișier numit webpack.config.js și adăugați următoarele configurații:

modul_exports = entry: './app.js', ieșire: nume fișier: 'bundle.js', modul: loaders: [exclude: / node_modules /, loader: ] = es2015 & presetări [] = reacție ']

app.js este fișierul în care va locui codul nostru React. Creați un fișier numit app.js în interiorul ReactFormApp pliant. Importați bibliotecile de reacții necesare în app.js. Creați o componentă numită App având un div cu un text. Rendeaza componenta folosind metoda de randare. Iată cum este de bază app.js fișier ar arata:

import React de la 'react' import render de la 'react-dom' var App = React.createClass (render: function 
 TutsPlus - Bine ați venit la aplicația React Form 
 ); ); face((  ), Document.getElementById ( 'app'))

Salvați modificările și încercați să reîncărcați serverul de dezvoltare web.

WebPACK-dev-server

Odată ce serverul a fost repornit, ar trebui să puteți vizualiza aplicația React care rulează pe http: // localhost: 8080 /.

Crearea unui formular de reacție

Avem aplicația de bază React în execuție, să trecem la pasul următor și să încercăm să creăm o componentă de formular folosind codul JSX în app.js.

Creați o componentă numită FormComp interior app.js.

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

În interiorul funcției de redare pentru FormComp, vom defini codul HTML pentru crearea unui formular. Vom pune câteva etichete, casete de introducere și un buton pentru a face clic. Iată cum arată:

var FormComp = React.createClass (render: function () retur ( 
 
TutsPlus - Formularul de reacție Tutorial
 
 Nume:   
 Numele de familie:   
  
 
 ); )

Refaceți componenta formularului FormComp pentru a afișa formularul înăuntru index.html.

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

Salvați modificările și reporniți serverul webpack și ar trebui să puteți vizualiza formularul.

Adăugarea de evenimente în Formular

Forma noastră de reacție este în formă bună. Pentru a interacționa, trebuie să adăugăm evenimente la formular. 

Vom începe prin adăugarea de variabile de stare pe fiecare dintre casetele de intrare, astfel încât să putem citi valorile casetelor de intrare. Să setăm variabilele de stare pentru casetele de text din primul nume și ultimul.

Asigurați-vă că setați starea inițială pentru variabilele de mai sus. Definiți getInitialState funcția în interiorul FormComp componentă și inițializa ambele variabile.

getInitialState: funcție () retur lName: ", fName:"; ,

Trebuie să gestionăm evenimentul de schimbare al cutiilor de intrare și să alocăm variabilele de stare când se schimbă valoarea în casetele de text. Deci, definiți un cu privire la schimbările eveniment pe casetele de intrare.

Definiți cu privire la schimbările funcționează în interiorul FormComp și setați variabilele de stare.

handleFNameChange: funcție (eveniment) this.setState (fName: event.target.value); , handleLNameChange: funcție (eveniment) this.setState (lName: event.target.value); 

Să încercăm să redimensionăm variabilele de stare utilizând ele. În interiorul FormComp HTML, adăugați următorul element care redă variabilele de stare.

Numele dvs. complet este 
 this.state.fName this.state.lName

Salvați modificările și reporniți serverul Webpack. Încercați să introduceți un text în interiorul caselor de text din numele primului nume și al ultimului nume și ar trebui să puteți vedea rezultatele de îndată ce tastați.

Apoi, să adăugăm un eveniment la clic pe butonul de trimitere pe care îl avem pe formularul nostru.

Definiți handleClick funcția în interiorul FormComp componentă. Când faceți clic pe butonul Trimiteți, vom concatenate atât prenumele, cât și numele de familie și vom afișa numele complet în interiorul formularului. Aici este handleClick funcţie:

handleClick: funcția () var fullName = this.state.fName + "+ this.state.lName; this.setState (Nume: fullName);,

De asemenea, inițializați Nume variabilă în getInitialState funcţie.

getInitialState: functie () retur lName: ", fName:", Nume: ";

Afișați numele complet concatenat în formularul HTML.

Numele dvs. complet este 
 This.state.Name

Iată cum este finala FormComp componentă arată:

var FormComp = React.createClass (getInitialState: function () retur lName: ", fName:", nume: ";, handleFNameChange: function (event) this.setState fName: event.target.value );, handleLNameChange: functie (eveniment) this.setState (lName: event.target.value);, handleClick: function () var fullName = this.state.fName + "+ this.state. lName; this.setState (Nume: fullName);, render: function () retur ( 
 
TutsPlus - Formularul de reacție Tutorial
 
 Nume:   
 Numele de familie:   
  
 
Numele dvs. complet este 
 This.state.Name 
 ); )

Salvați modificările de mai sus și reporniți serverul de dezvoltare. Introduceți ambele nume și apăsați butonul trimitere, iar numele complet ar trebui afișat.

Înfășurați-o

În acest tutorial React, ați învățat cum să începeți să creați aplicații React și ați înțeles conceptele de bază despre modul de abordare a formularelor și evenimentelor într-o aplicație Web bazată pe React. Sper că acest tutorial vă va fi de ajutor pentru a începe să creați aplicații bazate pe React.

Codul sursă din acest tutorial este disponibil pe GitHub.

Spuneți-ne gândurile, sugestiile sau corecțiile din comentariile de mai jos. Continuați să vizionați acest spațiu pentru mai multe tutoriale React.