Entendendo Formulários e Evento em React

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Hoje, aprenderemos sobre formulários e eventos em React. Começaremos criando um app simples e adicionaremos um formulário e alguns elementos. Então veremos como adicionar eventos aos elementos do formulário.

Se estiver começando em React, recomendamos a leitura do tutorial introdutório sobre React antes.

Começando

Comecemos configurando a aplicação React. Criemos uma pasta para o projeto: ReactFormApp. Dentro, criemos um arquivo chamado index.html e adicionemos o HTML a seguir:

<html>

<head>
    <title>TutsPlus - React Forms & Events</title>
</head>

<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>

</html>

Inicializemos o projeto usando o Node Package Manager (npm).

npm init

Após preencher os detalhes, devemos ter um arquivo package.json dentro do diretório.

{
  "name": "reactformapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Instalemos as react e react-dom usando npm.

npm install react react-dom --save

Instalemos os pacotes de babel necessário usando npm e salvemos o arquivo package.json.

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

Pacote do babel são necessários para transformar código JSX em JavaScript.

Criemos um arquivo de configuração para o webpack para lidar com suas configurações. Criemos um arquivo chamado webpack.config.js e adicionemos essas configurações:

module.exports = {
  entry: './app.js',

  output: {
    filename: 'bundle.js',
  },

  module: {
    loaders: [
      { exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
    ]
  }
}

app.js é o arquivo onde o código React estará. Criemos um arquivo app.js dentro de ReactFormApp. Importemos a bibliotecas do react denro de app.js. Criemos um componente chamado App com uma div e um texto. Renderimo-no usando o método render. Eis como o arquivo app.js deve estar:

import React from 'react'
import { render } from 'react-dom'

var App = React.createClass({
  render:function(){
    return(
      <div>
        TutsPlus - Welcome to React Form App
      </div>
    );
  }
});

render((
    <App />
  ),document.getElementById('app'))

Salvemos as mudanças e atualizemos o servidor de desenvolvimento do webpack.

webpack-dev-server

Uma vez reiniciado, poderemos ver o app em React executando em http://localhost:8080/.

Criando um Formulário em React

Temos um app básico em React rodando. Continuemos com o próximo passo e tentemos criar um componente de formulário usando código JSX no app.js.

Criemos um componente chamado FormComp em app.js.

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

Dentro da função render de FormComp, definiremos o código HTML para criar o formulário. Colocaremos rótulos, campos de entrada e botão para clicar. Eis como parecerá:

var FormComp = React.createClass({
    render:function(){
		return(
			<div>

				<h2>TutsPlus - React Form Tutorial</h2>
				<hr />
				
				<label>First Name: </label>
				<input type="text"  />
				<br />

				<label>Last Name: </label>
				<input type="text"  />
				<br />

				<input type="button" value="Submit" />

				<hr />
			</div>
		);
	}
})

Renderizemos o componente de fomrulário FormComp para mostrar o formulário dentro de index.html.

render((
    <FormComp />
	),document.getElementById('app'))

Savemos as mudanças, reiniciemos o servidor do webpack e devemos ver um formulário na página.

Adicionando Eventos ao Formulário

Nosso formulário em React está bom. Para torná-lo interativo, precisamos adicionar eventos a ele.

Começaremos adicionando variáveis de estado em cada campo de entrada para podermos ler seus valores. Configuremos as variáveis de estado para os campos do primeiro e último nome.

<input type="text" value = {this.state.fName} />
<input type="text" value = {this.state.lName} />

Configuremos o estado inicial para as variáveis acima. Definamos a função getInitialState dentro do componente FormComp e inicializemos ambas.

getInitialState: function () {
      return {lName: '',fName:''};
},

Precisamos lidar com o evento on-change dos campos e atribuir às variáveis de estado quando os valores deles alterarem. Assim, definamos um evento onChnge nos campos.

<input type="text" value = {this.state.fName} onChange={this.handleFNameChange} />
<input type="text" value = {this.state.lName} onChange={this.handleLNameChange} />

onChange será definida dentro de FormCamp e configurará as variáveis de estado.

handleFNameChange:function(event){
        this.setState({fName: event.target.value});
},

handleLNameChange:function(event){
   	 this.setState({lName: event.target.value});
}

Tentemos renderizá-las, usando-as. Dentro do HTML de FormComp, adicionemos o elemento abaixo renderizando as variáveis de estado.

<h3>Your full name is </h3> {this.state.fName} {this.state.lName}

Salvemos as mudanças e reiniciemos o servidor do webpack. Digitemos algum texto dentro dos campos e veremos o resultado tão logo começarmos a digitar.

Agora, adicionemos um evento on-click ao botão de enviar que temos no formulário.

<input type="button" onClick={this.handleClick} value="Submit" />

Definamos a função handleClick dentro do componente FormComp. Ao clicar o botão de enviar, concatenaremos o primeiro e último nomes, e mostraremos o nome completo no formulário. Eis a função handleClick:

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

Além disso, inicializemos a variável Name na função getInitialState.

getInitialState: function () {
     return {lName: '',fName:'',Name:''};
}

Mostremos o nome completo concatenado no formulário HTML.

<h3>Your full name is </h3> {this.state.Name}

Eis como o componente FormComp parecerá:

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(
			<div>
				<h2>TutsPlus - React Form Tutorial</h2>
				<hr />

				<label>First Name: </label>
				<input type="text" value = {this.state.fName} onChange={this.handleFNameChange}  />
				<br />

				<label>Last Name: </label>
				<input type="text" value = {this.state.lName} onChange={this.handleLNameChange}  />
				<br />

				<input type="button" onClick={this.handleClick} value="Submit" />

				<hr />

				<h3>Your full name is </h3> {this.state.Name}
			</div>
		);
	}
})

Salvemos as mudanças e reiniciemos o servidor de desenvolvimento. Digitemos ambos nomes e apertemos o botão de enviar, e o nome completo deverá aparecer.

Resumindo

Nesse tutorial, aprendemos como começar a criar apps em React e a entender os conceitos básicos sobre como lidar com formulários e eventos em um app. Esperamos que tenha sido útil e ajudado a iniciar com apps baseados em React.

O código fonte do tutorial está disponível no GitHub.

Diga-nos o que achou, dê sua sugestão ou quaisquer correções nos comentários abaixo. Fique de olho para mais tutoriais de React.