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.