Como criar um formulário interativo no React.js

Nathan Sebhastian Blocked Unblock Seguir Seguindo 7 de janeiro

Não importa qual aplicativo você faça com o React, você precisará de formulários para coletar dados de seus usuários. Os formulários estão em todos os aplicativos e são o processo-chave para mover o conhecimento dos usuários para seu aplicativo.

Infelizmente, quando você procura orientação na documentação do React, tudo o que você consegue é o seguinte:

Este é basicamente o resumo da documentação do React. Ele simplesmente informa que é assim que o React deve ser usado no tratamento de um clique ou pressionamento de tecla do usuário. Reacção define o valor de um usuário para declarar e, em seguida, usa o estado como valor para a entrada. O fim .

Hã? é isso aí?

Sim … como para o resto dos problemas que você enfrentará ao criar um formulário para um aplicativo com lógica de negócios complexa , bem, eles são com você. Gosto de fazer:

  1. Validação
  2. Exibindo erros
  3. Manipulação de submissão
  4. Acompanhando os campos do formulário
  5. Mudando a lógica do formulário por meio de entradas
  6. Preencha o formulário com dados do banco de dados ou API
  7. Organizando o código do formulário
  8. Fique sã enquanto faz todas as coisas acima ?

Como você vai ler na documentação, o React é muito unopinionated sobre como você pode estruturar seu projeto e escolher sua pilha de biblioteca. Isso também significa que apenas fornece as necessidades básicas para a criação de componentes de formulários. Componentes, estado e adereços são como blocos de quebra-cabeça, e precisamos juntá-los sozinhos

Eu tive o privilégio de criar um formulário complexo com o React, onde eu precisava coletar dados de registro de negócios de meus usuários. Depois de quebrar dois teclados, finalmente aprendi a construir uma boa forma com o React. Deixe-me ajudá-lo a começar a construir um. O objetivo deste tutorial é fazer um formulário interativo com o React – um que responda imediatamente às entradas.

Uma forma básica em reagir

Antes de criar um formulário com o React, você precisa entender esses três fundamentos simples:

Estado é usado para armazenar dados

Componentes são usado para definir interfaces e métodos de formulário

Adereços são usados para opções: alterar interfaces ou passar dados

Esses fundamentos são como blocos de quebra-cabeças que precisam ser reunidos para criar uma forma interativa funcional. Consegui? Boa. Vamos começar com a forma mais básica no React.

Nota: o código de exemplo usará a estrutura do Bootstrap para estilizar e exibir erros. É por isso que tem nomes de classe do Bootstrap.

Uma forma de reação usa o state como a única fonte de verdade para valores de campo. Isso significa que cada elemento de input que você terá em seu component formulário assumirá o valor de state como seu valor.

 this.state = { 
nome:'',
o email: '',
};

Os valores de estado são então atribuídos ao value prop da tag de input . Nós também adicionamos o prop onChange que será executado toda vez que o valor de entrada for alterado. Por fim, também adicionamos onSubmit prop ao nosso componente de formulário para lidar com o envio.

 render () { 
Retorna (
<form onSubmit = {this.handleSubmit}>
<div className = "grupo de formulários">
<label htmlFor = "name"> Nome </ label>
<input name = "name" className = "controle de formulário"
id = "name" placeholder = "Digite o nome"
value = {this.state.name}
onChange = {this.handleNameChange} />
</ div>
<div className = "grupo de formulários">
<label htmlFor = "email"> Email </ label>
<input name = "email" className = "controle de formulário"
id = "email" espaço reservado = "Enter email"
value = {this.state.email}
onChange = {this.handleEmailChange} />
</ div>
<button type = "submit"
className = "btn btn-sucesso btn-block"> Enviar </ button>
</ form>
);
}

Em seguida, podemos adicionar um método handleChange que aceita o argumento do event . Este objeto de evento conterá nosso nome e valor de entrada.

 handleNameChange = ( event ) => { 
this.setState ({name: event.target.value});
}
handleEmailChange = ( event ) => {
this.setState ({email: event.target.value});
}

A última parte de uma estrutura de formulário é o método do manipulador de envio. Neste exemplo, usamos um método handleSubmit que simplesmente chamava uma caixa de alerta que imprimia nossos valores de estado.

 handleSubmit = ( event ) => { 
event.preventDefault ();
const {nome, email} = this.state
alert (`Seus valores de estado: n
nome: $ {name} n
email: $ {email} `)
}

Como um formulário HTML regular, é aqui que os dados salvos ou enviados são executados e processados. Como estamos usando nosso próprio código JavaScript para lidar com o envio, precisamos adicionar event.preventDefault() ao nosso método de envio. Isso ocorre porque o ouvinte de JavaScript do navegador está configurado para ouvir os eventos de envio de formulário, que geralmente acionam um recarregamento de página. Ao usar este preventDefault , estamos dizendo ao navegador para parar de fazer qualquer método padrão que ele faça. Dessa forma, o recarregamento da página será interrompido e nosso método de envio poderá ser executado.

Aproveitando entradas controladas

Em React, a estrutura que vimos acima é na verdade uma abordagem chamada “entradas controladas”. Isso significa que deixamos o estado React salvar os valores de nossos elementos de entrada. O componente que renderiza nosso formulário também manipulará qualquer alteração nos valores de entrada pela entrada subseqüente do usuário.

Ao controlar o valor de entrada, o React garante que os dados (ou estado) da aplicação e a interface do usuário (os elementos de entrada) estarão sempre sincronizados. O estado fornece um valor à entrada e a entrada solicita uma atualização de estado quando o evento onChange é acionado – o evento onChange será acionado em cada pressionamento de tecla.

Diagrama de entrada controlado

Esta entrada controlada é a chave para criar uma forma interativa de Reação. Deixa-me mostrar-te como.

Exibindo erros

A entrada de dados em um formulário pode estar errada, portanto, precisamos verificar os dados antes que eles sejam processados. A abordagem tradicional para validar dados é enviando o formulário, aguardando que o servidor termine a validação e, em seguida, a página da Web será atualizada com alguma mensagem de erro. O processo leva muito tempo e é complicado para os usuários.

O React pode resolver esse problema criando uma validação instantânea no componente de formulário. Na verdade, este é um padrão comum em aplicativos React, e é muito impressionante na minha opinião.

Como o React armazena todos os dados do formulário no estado, podemos usar um pouco de verificação antes de processar e exibir uma mensagem de erro se os dados não forem válidos. Por exemplo, para validar se o tamanho do nome tiver mais de 3 caracteres, podemos usar:

 render () { 
const isValidName = this.state.name.length> 3;
const isValidEmail = this.state.email.length> 3;
}

Colocando em contexto:

O formulário está sendo validado instantaneamente e a mensagem de erro desaparecerá quando o nome tiver mais de 3 caracteres. Mas essa validação não é a ideal porque estamos colocando a lógica de validação no método render, o que tornará o método espaguete muito rápido quando validarmos muitos dados. Ele também funciona mesmo antes de fazermos qualquer coisa com a caixa de texto. Isso não é bom.

Usando o estado para verificação de erros

Assim como usamos o estado para entrada de dados, também podemos usar o estado para validação. Nós vamos adicionar uma nova propriedade de estado em nossa inicialização de estado.

 this.state = { 
nome: '',
o email: '',
nameError: '',
emailError: '',
}

O estado formError manterá nossa mensagem de erro e as usaremos para exibir qualquer mensagem de erro que possamos ter. Vamos colocá-los no contexto criando novas funções de validação e chamando-as em retorno de chamada setState .

 handleNameChange = event => { 
this.setState ({
name: event.target.value
}, () => {this.validateName ();
});
};
 handleEmailChange = event => { 
this.setState ({
email: event.target.value
}, () => {this.validateEmail ();
});
};
 validateName = () => { 
const {nome} = this.state;
this.setState ({
nameError: name.length> 3? null: 'O nome deve ter mais de 3 caracteres'
});
}
 validateEmail = () => { 
const {email} = this.state;
this.setState ({
emailError: email.length> 3? null: 'O email deve ter mais de 3 caracteres'
});
}

Com isso, somente quando o usuário digitar algo nas entradas, o método de validação será executado. Agora, a última coisa que temos que fazer é executar a validação quando o usuário clica em uma caixa de texto e, em seguida, move para clicar em outra caixa de texto sem fazer nada.

Adicionando adereços onBlur

Vamos adicionar um prop onBlur aos nossos elementos de entrada:

 <input 
nome = 'nome'
// className, id, onChange ...
onBlur = {this.validateName}
/>
 <input 
nome = 'email'
// className, id, onChange ...
onBlur = {this.validateEmail}
/>

Agora, o método de validação será executado no texbox correspondente que foi "tocado" pelos usuários e, em seguida, exibirá qualquer mensagem de erro se ela tiver um.

A última coisa a fazer é atualizar nosso método de renderização para usar os estados de erro. Aqui está o link completo do código fonte.

Com isso, temos nossa configuração de validação instantânea. Há mais coisas que podemos fazer com nosso formulário, como desativar o botão de envio e otimizar os métodos handleChange , que são muito verbosos para serem reutilizados em outra entrada.

Se você estiver interessado em aprender mais sobre formulários React, eu estou cobrindo o restante deste tutorial no meu livro chamado Mastering React Form, onde eu crio escrevendo formulários complexos (como um formulário de wizard e json ) e forneço o código fonte para você estudar e examinar.