Projeto React para iniciantes – Como construir formulários básicos usando os ganchos React

Projeto React para iniciantes – Como construir formulários básicos usando os ganchos React

17 de August, 2020 0 By António César de Andrade


O que estamos construindo

Neste projeto React para iniciantes, aprenderemos como construir formulários básicos usando os ganchos React. Aprenderemos como gerenciar o estado do formulário, lidar com a validação e trabalhar com manipuladores de envio.

Confira:

Tente você mesmo

Se você quiser experimentar primeiro, aqui estão os cenários (você também pode pegar o código CSS / inicial abaixo):

  • O usuário deve ser capaz de inserir valores no formulário
  • Quando o usuário clica em enviar, se algum campo estiver vazio, uma mensagem de erro deve aparecer em vermelho
  • Se o formulário for enviado e for válido, uma mensagem de sucesso deve aparecer

Passo a passo de vídeo

Confira o vídeo passo a passo no YouTube aqui.

Código Inicial

Pegue-o no GitHub aqui.

Vamos lá! Adicionando estado

Vamos começar adicionando um objeto de estado para manter nosso formulário. Teremos uma nova linha no topo de nossa App function no App.js e adicione o seguinte:

const [values, setValues] = useState({
	firstName: '',
	lastName: '',
	email: '',
});

Temos três campos no formulário dos quais precisamos saber o estado.

Agora, o estado inicial será um objeto. E este objeto terá três valores, um para cada um desses campos. Então, vamos chamá-los de algo semelhante ao que são chamados no formulário.

o firstName será definido como em branco inicialmente, o mesmo com lastName e mesmo com email.

E agora, você notará um erro que diz “useState is not defined”, então você precisa importá-lo do React aqui. Faça isso na parte superior do arquivo como parte das importações:

import React, { useState } from "react";

Ok, agora ele está nos dizendo que essas variáveis ​​ainda não foram usadas. Isso é bom porque não aplicamos esses valores ao formulário. Mas tudo o que fizemos até agora foi criar um objeto de estado, e este objeto de estado puxa firstName, lastName e email.

Agora que temos alguns valores em estado, faz sentido aplicá-los aos nossos campos de entrada. Adicione um value propriedade para cada um dos seus campos de entrada, como:


<input
    id="first-name"
    class="form-field"
    type="text"
    placeholder="First Name"
    name="firstName"
    value={values.firstName}
/>

<input
    id="last-name"
    class="form-field"
    type="text"
    placeholder="Last Name"
    name="lastName"
    value={values.lastName}
/>

<input
    id="email"
    class="form-field"
    type="text"
    placeholder="Email"
    name="email"
    value={values.email}
/>

Tudo o que fizemos aqui foi dizer: “Ok, para esta entrada, o valor será qualquer valor que esteja no estado.” Vamos salvar isso e ver o que está acontecendo em nossos formulários, para ter certeza de que tudo ainda está funcionando.

E eles não são. Ah não!

Se você selecionar uma entrada e começar a digitar vigorosamente no teclado, nada aparecerá na tela. O que está acontecendo aqui?

Atualizando estados de entrada

Bem, nós dissemos que o valor dessa entrada será o que estiver no estado.

Por exemplo, firstName está definido como em branco porque é assim que o definimos, mas não dissemos à entrada, “Ok. Sempre que eu digitar ou a entrada mudar, quero que você atualize o estado com os novos valores.”

Sempre que fazemos coisas como essa, isso efetivamente dá controle ao React. Portanto, temos que dizer ao React para também atualizar os valores.

Isso significa que temos que atualizar os valores de estado sempre que digitarmos nesses campos.

OK. A maneira mais simples de fazer isso é criar um manipulador para cada um desses campos de entrada, que atualiza o estado sempre que ocorre um evento de mudança.

Vá em frente e adicione o seguinte logo abaixo dos objetos de estado:

const handleFirstNameInputChange = (event) => {
	event.persist();
	setValues((values) => ({
		...values,
		firstName: event.target.value,
	}));
};

Isso leva o evento que obtemos do onChange. Basicamente, estamos atualizando este objeto e salvando-o de volta ao estado.

Copiaremos os valores antigos fazendo os três pontos, que também é conhecido como operador de propagação. E então, vamos apenas digitar os valores e adicionar uma vírgula.

A seguir, vamos dizer firstName será igual a event.target.value. Queremos adicionar isso à nossa contribuição. Então, em nosso JSX no entrada para o primeiro nome, vamos pegar uma nova linha em algum lugar (em qualquer lugar, isso realmente não importa) e adicionar o onChange propriedade como esta:

<input 
    id='first-name' 
    class="form-field" 
    type="text" 
    placeholder="First Name" 
    name="firstName" 
    value={values.firstName} 
    onChange={handleFirstNameInputChange} />

Agora, se entrarmos em nosso navegador e começarmos a digitar, você verá que as coisas funcionam. O restante deles não está funcionando porque ainda não adicionamos manipuladores para eles. Veremos isso em um minuto.

Só para recapitular o que está acontecendo: sempre que digitarmos nesta caixa, o evento onChange acontece para cada pressionamento de tecla. Isso é sempre chamado.

O evento é transmitido pelo React, e queremos atualizar nosso objeto de estado. Então, para fazer isso, chamamos de setValues função e passar um novo objeto com os valores atualizados.

Agora, só queremos fazer o mesmo para lastName e email. Adicione outro manipulador para cada:

const handleLastNameInputChange = (event) => {
	event.persist();
	setValues((values) => ({
		...values,
		lastName: event.target.value,
	}));
};

const handleEmailInputChange = (event) => {
	event.persist();
	setValues((values) => ({
		...values,
		email: event.target.value,
	}));
};

E não se esqueça de adicionar o onChange propriedades aos campos de entrada para cada:


<input
    id="last-name"
    class="form-field"
    type="text"
    placeholder="Last Name"
    name="lastName"
    value={values.lastName}
    onChange={handleLastNameInputChange}
/>
<input
    id="email"
    class="form-field"
    type="text"
    placeholder="Email"
    name="email"
    value={values.email}
    onChange={handleEmailInputChange}
/>

OK. Agora é a hora da verdade. Está tudo funcionando ou quebramos alguma coisa ao longo do caminho? Vamos experimentar e ver. Preencha alguns dados e os campos de entrada devem estar funcionando agora. Viva!

Mesmo que nossos campos de entrada estejam funcionando, ainda temos um problema engraçado: se digitarmos alguma coisa no formulário e tentarmos enviar, nada acontecerá. Isso apenas atualizará a página e todos os dados do nosso formulário serão perdidos.

Vamos fazer algo sobre isso.

Mostrando uma mensagem de sucesso

Após clicar em cadastrar, deverá mostrar uma mensagem de sucesso se o formulário for válido. O que queremos fazer é acessar nosso JSX e, logo abaixo do formulário, adicionar um novo div. Novamente, adicionei as classes para você para uma mensagem de sucesso:

<div class="success-message">Success! Thank you for registering</div>

Agora, é claro, isso não vai a lugar nenhum. Vai apenas fingir que chamamos um servidor ou ponto de extremidade em algum lugar. E ele voltou com uma mensagem de sucesso, então vamos apenas exibir isso para um usuário.

Mas atualmente está aparecendo o tempo todo. O que queríamos é apenas mostrar isso se o usuário enviou o formulário com sucesso.

Então, vamos adicionar outro objeto de estado como este:

const [submitted, setSubmitted] = useState(false);

Manteremos isso separado dos valores, pois é uma parte diferente do formulário. Não queremos misturar tudo aqui e causar uma nova renderização inteira. Isso nos dirá se o formulário foi enviado ou não.

Vai ser definido para false inicialmente porque a primeira vez que um usuário acessa a página, ela não será enviada.

E agora, queremos apenas fazer algumas coisas inteligentes no JSX para dizer: “Se enviado for verdade, então queremos mostrar a mensagem de sucesso.”

Atualize a linha que acabamos de adicionar com o seguinte:

{showSuccess && <div class="success-message">Success! Thank you for registering</div>}

Vamos embrulhar nosso mensagem de sucesso em um operador ternário. Isso é basicamente uma instrução if abreviada que nos permite renderizar as coisas dinamicamente na página.

A mensagem de sucesso agora só aparecerá se showSuccess é verdade. Como você pode ver agora no navegador, isso desapareceu.

Se voltarmos para o nosso objeto de estado para submitted e mude isso para true, ele deve aparecer novamente. E é verdade.

Vamos mudar isso de volta para falso. E então vamos atualizar nosso Chrome e ver o que acontece agora.

Não informamos ao botão de registro ou ao formulário o que acontece no Summit, então ainda vai atualizar a página. Agora, só precisamos de um novo manipulador para lidar com o clique do botão de registro.

Se pularmos em nossos manipuladores de eventos e adicionarmos o seguinte:

const handleSubmit = (e) => {
	e.preventDefault();
	setSubmitted(true);
};

event.preventDefault irá parar a atualização que temos visto.

Adicionaremos mais lógica aqui em um minuto em torno da validação e outras coisas. Mas, por enquanto, vamos apenas dizer “setSubmitted” para ser verdade.

Em seguida, precisamos dizer ao formulário para chamar essa função quando for enviada. Atualize o JSX para incluir um onSubmit propriedade na tag de formulário como:

<form class="register-form" onSubmit={handleSubmit}>
	//... other code
</form>

Agora, se executarmos o código no navegador, clique no botão de registro, a mensagem aparece. Viva!

Adicionando validação e mostrando mensagens de erro

Nosso formulário parece estar bom até agora, mas está faltando um componente-chave de qualquer formulário, que é a validação. Se olharmos nosso exemplo de trabalho, se eu enviar isso com algum campo vazio, aparecerá um erro que diz: “Por favor, insira seus detalhes.”

Abaixo de cada entrada, adicionaremos um <span> que conterá a mensagem de erro. Seu JSX deve ser semelhante a este:


<input
    id="first-name"
    class="form-field"
    type="text"
    disabled={showSuccess}
    placeholder="First Name"
    name="firstName"
    value={values.firstName}
    onChange={handleInputChange}
/>
<span id="first-name-error">Please enter a first name</span>

<input
    id="last-name"
    class="form-field"
    type="text"
    placeholder="Last Name"
    name="lastName"
    value={values.lastName}
    onChange={handleInputChange}
/>
<span id="last-name-error">Please enter a last name</span>

<input
    id="email"
    class="form-field"
    type="text"
    placeholder="Email"
    name="email"
    value={values.email}
    onChange={handleInputChange}
/>
<span id="email-error">Please enter an email address</span>

Você pode ver que esses erros sempre aparecem, porque não temos nenhuma lógica condicional que diga “não aparece”.

Agora, queremos apenas que essas mensagens de erro mostrem se o botão de registro foi clicado.

Voltaremos ao código. Queremos adicionar alguma lógica condicional dentro e ao redor das mensagens de erro, de modo que elas só apareçam se o botão tiver sido clicado e o campo estiver vazio:

{submitted && !values.firstName && <span id='first-name-error'>Please enter a first name</span>}

O que estamos fazendo aqui é verificar se o formulário foi enviado e se o firstName objeto de estado está vazio. Em caso afirmativo, queremos exibir a mensagem de erro. Novamente, estamos usando apenas um operador ternário, nada de especial!

Faça o mesmo para os outros erros:

{submitted && !values.lastName && <span id='last-name-error'>Please enter a last name</span>}

//...other code

{submitted && !values.email && <span id='email-error'>Please enter an email address</span>}

Se deixarmos o formulário em branco e clicarmos em registrar, erros aparecerão. Se começarmos a digitar coisas, podemos ver que o erro desaparece. E se removermos o que digitamos, o erro volta novamente.

Vamos tentar enviar algumas coisas. Ok, então isso parece estar funcionando.

A última coisa que queremos fazer é garantir que essa mensagem de sucesso apareça apenas se o formulário for válido. Vá em frente e adicione um novo valor de estado:

const [valid, setValid] = useState(false);

Isso é usado para nos dizer se nosso formulário é válido – lembre-se de que usar objetos de estado é uma boa maneira de manter o “estado” das diferentes partes de seu aplicativo (quem poderia imaginar?).

As mensagens de sucesso devem aparecer apenas se submetidas for verdade e seguidas também forem verdadeiras. Uma vez que definimos válido como falso inicialmente, ele não aparecerá.

Na nossa handleSubmit função, queremos dizer que o valor é verdadeiro se um formulário for válido. Podemos fazer isso verificando cada um dos nossos valores de estado para os campos do formulário, certificando-nos de que sejam um valor verdadeiro.

Adicione o seguinte:


const handleSubmit = (event) => {
event.preventDefault();
if(values.firstName && values.lastName && values.email) {
    setValid(true);
}
setSubmitted(true);
}

Se algum desses campos for falso, então valid permanecerá como falso. Isso significa que a div da mensagem de sucesso não será exibida. Vamos ver como funciona. Se clicarmos em registrar sem os campos, nossas mensagens de erro serão exibidas. Vamos digitar algumas coisas válidas, clicar em registrar e a mensagem aparecerá!

Quer mais ideias de projetos?

Por que não tentar construir alguns projetos React para impulsionar ainda mais seu aprendizado? Eu envio e-mails a cada poucas semanas (ish) com ideias de projetos, código inicial e dicas. Inscreva-se para receber isso diretamente na sua caixa de entrada!



Fonte

Click to rate this post!
[Total: 0 Average: 0]