Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React
Code

Entendendo Formulários e Evento em React

by
Difficulty:IntermediateLength:ShortLanguages:

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:

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

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

Instalemos as react e react-dom usando npm.

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

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:

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:

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

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

React Form App Display Screen

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.

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á:

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

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

React App Form Tutorial

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.

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

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.

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

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

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.

React Form App Form Fill

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

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:

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

Mostremos o nome completo concatenado no formulário HTML.

Eis como o componente FormComp parecerá:

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.