Entendiendo Formas y Eventos en Reaccionar

En este tutorial, aprenderá acerca de las formas y los eventos en React. Comenzaremos creando una aplicación simple basada en React y luego agregaremos un formulario y algunos elementos. A continuación veremos cómo agregar eventos a los elementos del formulario..

Si usted es un principiante con React, le recomiendo que lea el tutorial introductorio de React para comenzar..

Empezando

Comencemos configurando nuestra aplicación web React. Crear una carpeta de proyecto llamada ReactFormApp. Dentro ReactFormApp, crear un archivo llamado index.html y añada el siguiente código HTML:

Inicialice el proyecto usando Node Package Manager (npm).

npm init

Complete los detalles requeridos y usted debe tener la paquete.json archivo dentro de la ReactFormApp carpeta.

"name": "reactformapp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \" Error : no se especificó la prueba \ "&& exit 1", "autor": "", "licencia": "ISC"

Instala el reaccionar y reaccionar dependencias usando npm.

npm instalar reaccionar reaccionar-dom --save

Instale el paquete babel requerido usando npm y guárdelo en el paquete.json expediente.

npm install --save-dev webpack webpack-dev-server babel-core babel-loader babel-preset-reaccion babel-preset-es2015

Babel Se requieren paquetes para transformar el código JSX a JavaScript.

Cree un archivo de configuración de paquete web para manejar las configuraciones de paquete web. Crear un archivo llamado webpack.config.js y añada las siguientes configuraciones:

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

app.js es el archivo donde residirá nuestro código React. Crear un archivo llamado app.js dentro de ReactFormApp carpeta. Importar las bibliotecas de reacción requeridas en app.js. Crear un componente llamado Aplicación Tener un div con algún texto. Renderiza el componente utilizando el método de renderizado. Aquí es cómo el básico app.js archivo se vería:

importar Reaccionar desde 'reaccionar' importar render desde 'react-dom' var App = React.createClass (render: function () return ( 
 TutsPlus - Bienvenido a React Form App 
 ); ); hacer((  ), document.getElementById ('app'))

Guarde los cambios e intente volver a cargar el servidor de desarrollo del paquete web..

webpack-dev-server

Una vez que se haya reiniciado el servidor, debería poder ver la aplicación React ejecutándose en http: // localhost: 8080 /.

Creando un formulario de reacción

Tenemos la aplicación React básica en funcionamiento. Vayamos al siguiente paso e intentemos crear un componente de formulario utilizando el código JSX. app.js.

Crear un componente llamado FormComp dentro app.js.

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

Dentro de la función de render para FormComp, definiremos el código HTML para crear un formulario. Pondremos un par de etiquetas, cuadros de entrada y un botón para hacer clic. Aquí está cómo se ve:

var FormComp = React.createClass (render: function () return ( 
 
TutsPlus - Tutorial React Form
 
 Nombre de pila:   
 Apellido:   
  
 
 ); )

Renderizar el componente de formulario FormComp para mostrar el formulario dentro index.html.

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

Guarde los cambios y reinicie el servidor de paquetes web y debería poder ver el formulario.

Agregando Eventos al Formulario

Nuestra forma de Reacción está en buena forma. Para hacerlo interactuar, necesitamos agregar eventos al formulario.. 

Comenzaremos agregando variables de estado en cada uno de los cuadros de entrada para que podamos leer los valores de los cuadros de entrada. Vamos a configurar las variables de estado para el primer nombre y el último cuadro de texto de entrada.

Asegúrese de establecer el estado inicial para las variables anteriores. Definir el getInitialState función dentro de la FormComp Componer e inicializar ambas variables.

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

Necesitamos manejar el evento de cambio de los cuadros de entrada y asignar las variables de estado cuando cambia el valor en los cuadros de texto. Así que define un onChange evento en los cuadros de entrada.

Definir el onChange funciona dentro del FormComp y establecer las variables de estado.

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

Intentemos renderizar las variables de estado usándolas. Dentro de FormComp HTML, agregue el siguiente elemento representando las variables de estado.

Tu nombre completo es 
 this.state.fName this.state.lName

Guarde los cambios y reinicie el servidor webpack. Intente ingresar un texto dentro de los cuadros de texto del primer nombre y apellido, y debería poder ver los resultados tan pronto como escribe.

A continuación, agreguemos un evento de clic al botón de envío que tenemos en nuestro formulario.

Definir el manejarHaga clic función dentro de la FormComp componente. Al hacer clic en el botón Enviar, concatenaremos tanto el nombre como el apellido y mostraremos el nombre completo dentro del formulario. Aquí está el manejarHaga clic función:

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

Además, inicializa el Nombre variable en el getInitialState función.

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

Mostrar el nombre completo concatenado en el formulario HTML.

Tu nombre completo es 
 this.state.Name

Aquí es cómo la final. FormComp aspecto 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 - Tutorial React Form
 
 Nombre de pila:   
 Apellido:   
  
 
Tu nombre completo es 
 this.state.Name 
 ); )

Guarde los cambios anteriores y reinicie el servidor de desarrollo. Ingrese ambos nombres y presione el botón enviar, y se mostrará el nombre completo.

Envolviendolo

En este tutorial de React, aprendió cómo comenzar a crear aplicaciones React y comprendió los conceptos básicos sobre cómo tratar los formularios y eventos en una aplicación web basada en React. Espero que este tutorial sea útil para comenzar a crear aplicaciones basadas en React..

El código fuente de este tutorial está disponible en GitHub.

Háganos saber sus opiniones, sugerencias o correcciones en los comentarios a continuación. Sigue viendo este espacio para más tutoriales de React..