Comprendere le forme e gli eventi in React

In questo tutorial, imparerai a conoscere le forme e gli eventi in React. Inizieremo creando una semplice app basata su React e quindi aggiungendo un modulo e alcuni elementi. Quindi vedremo come aggiungere eventi agli elementi del modulo.

Se sei un principiante con React, ti consiglio di leggere il tutorial introduttivo su React per iniziare.

Iniziare

Iniziamo impostando la nostra applicazione web React. Creare una cartella di progetto chiamata ReactFormApp. Dentro ReactFormApp, crea un file chiamato index.html e aggiungi il seguente codice HTML:

  TutsPlus - Reazione di moduli ed eventi

Inizializzare il progetto usando Node Package Manager (npm).

npm init

Inserisci i dettagli richiesti e dovresti avere il package.json file all'interno del ReactFormApp cartella.

"name": "reactformapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \" Errore : nessun test specificato \ "&& exit 1", "author": "", "license": "ISC"

Installa il reagire e reagire-dom dipendenze usando npm.

npm install react react-dom --save

Installa il pacchetto Babel richiesto usando npm e salvalo nel package.json file.

npm installa --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015

Babele i pacchetti sono necessari per trasformare il codice JSX in JavaScript.

Creare un file di configurazione del webpack per gestire le configurazioni del webpack. Crea un file chiamato webpack.config.js e aggiungere le seguenti configurazioni:

module.exports = entry: './app.js', output: nome file: 'bundle.js',, module: caricatori: [exclude: / node_modules /, loader: 'babel-loader? preset [ ] = es2015 e preimpostazioni [] = reagisci ']

app.js è il file in cui risiede il nostro codice React. Crea un file chiamato app.js dentro il ReactFormApp cartella. Importa le necessarie librerie di reazione in app.js. Crea un componente chiamato App avere un div con del testo Renderizza il componente usando il metodo render. Ecco come base app.js il file sarebbe:

import Reagire da 'react' import render da 'react-dom' var App = React.createClass (render: function () return (  TutsPlus - Benvenuto in App React Form 
 ); ); rendering ((  ), Document.getElementById ( 'app'))

Salvare le modifiche e provare a ricaricare il server di sviluppo webpack.

webpack-dev-Server

Una volta riavviato il server, dovresti essere in grado di visualizzare l'app React in esecuzione su http: // localhost: 8080 /.

Creare un modulo di reazione

Abbiamo installato l'applicazione React di base, passiamo al passaggio successivo e proviamo a creare un componente modulo utilizzando il codice JSX in app.js.

Crea un componente chiamato FormComp dentro app.js.

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

All'interno della funzione di rendering per FormComp, definiremo il codice HTML per la creazione di un modulo. Inseriremo un paio di etichette, caselle di input e un pulsante per fare clic. Ecco come appare:

var FormComp = React.createClass (render: function () return (  TutsPlus - Esercita il modulo React
 
 Nome di battesimo:   
 Cognome:   
  
 
 ); )

Renderizza il componente del modulo FormComp per visualizzare il modulo all'interno index.html.

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

Salvare le modifiche e riavviare il server Webpack e si dovrebbe essere in grado di visualizzare il modulo.

Aggiungere eventi al modulo

La nostra forma di React è in buona forma. Per farlo interagire, dobbiamo aggiungere eventi al modulo.

Inizieremo aggiungendo variabili di stato su ciascuna casella di input in modo da poter leggere i valori delle caselle di input. Impostiamo le variabili di stato per il nome e le ultime caselle di testo di input.

Assicurati di impostare lo stato iniziale per le variabili precedenti. Definire il getInitialState funzione all'interno del FormComp componente e inizializza entrambe le variabili.

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

Dobbiamo gestire l'evento on-change delle caselle di input e assegnare le variabili di stato quando il valore nelle caselle di testo cambia. Quindi definire un onChange evento sulle caselle di input.

Definire il onChange funzioni all'interno del FormComp e impostare le variabili di stato.

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

Proviamo a rendere le variabili di stato usando loro. Dentro il FormComp HTML, aggiungi il seguente elemento che mostra le variabili di stato.

Il tuo nome completo è 
 this.state.fName this.state.lName

Salvare le modifiche e riavviare il server Webpack. Prova ad inserire del testo nelle caselle di testo del nome e del cognome e dovresti essere in grado di visualizzare i risultati non appena digiti.

Successivamente, aggiungiamo un evento su clic al pulsante di invio che abbiamo nel nostro modulo.

Definire il handleClick funzione all'interno del FormComp componente. Facendo clic sul pulsante di invio, concateneremo sia il nome che il cognome e visualizzeremo il nome completo all'interno del modulo. Ecco il handleClick funzione:

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

Inoltre, inizializza il Nome variabile nel getInitialState funzione.

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

Mostra il nome completo concatenato nel modulo HTML.

Il tuo nome completo è 
  This.state.Name

Ecco come il finale FormComp aspetto del componente:

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 () return (  TutsPlus - Esercita il modulo React
 
 Nome di battesimo:   
 Cognome:   
  
 Il tuo nome completo è 
  This.state.Name 
 ); )

Salvare le modifiche precedenti e riavviare il server di sviluppo. Immettere entrambi i nomi e premere il pulsante di invio, per visualizzare il nome completo.

Avvolgendolo

In questo tutorial su React, hai imparato come iniziare a creare app React e hai compreso i concetti di base su come gestire i moduli e gli eventi in un'applicazione web basata su React. Spero che questo tutorial ti sia utile per iniziare a creare app basate su React.

Il codice sorgente di questo tutorial è disponibile su GitHub.

Fateci sapere i vostri pensieri, suggerimenti o eventuali correzioni nei commenti qui sotto. Continua a guardare questo spazio per ulteriori tutorial React.

Codice