React Essencial – aula 17

Validação da Entrada

Aula para continuidade do nosso curso react essencial eu sou nós concluímos na até aula passada essa parte aqui da edição de tarefas usando essa janela modal só que ela tá ficando aqui em cima eu estava consultando aqui a documentação do black strap e encontrei aqui essa propriedade center da janela modal e faz exatamente isso deixa ela centralizada também na

Vertical da viewport então vamos acrescentar aqui no nosso componente modal além das suas propriedades que nós já apresentamos mais essa center bom e como vocês podem ver ali na documentação em um booleano então nós vamos colocar como true vamos salvar aqui e vamos ver se deu certo xonar vamos agitar exatamente a janela de edição agora vem aqui é para o centro

Da viewport e fica de uma maneira esteticamente mais agradável certo galera mas vamos ao assunto da aula de hoje que é validação de dados de entrada no cliente pega o café aí vamos mergulhar nos estudos e é nessa hora nós vamos tratar de um assunto bastante importante que a validação dos dados de entrada no formulário o nosso forma aqui o nosso formulário

Atualmente ele é bem simples ele consiste vejo que nós temos aqui esse forma aqui né ele consiste apenas desse input onde o usuário entra aí com a descrição da tarefa esse os formulários normalmente os são mais complexos nós temos um exemplo bem comum que é aquele formulário é para o usuário logar no sistema que normalmente têm lá um input para ele entrar o

Nome do usuário e um outro para lembrar a senha o pessoal do usuário normalmente as atualização é feita depois que ele entra todos os dados e dá o submit quando ele dá o submit então é feito a validação como nós também estamos dando uns oi para o nosso input aqui só que nesse aplicativo meu tá as coisas tão muito simples se nós vamos também fazer de uma

Forma bem simples essa validação à medida que os formulários o aplicativo vai ficando mais complexo é preciso você às vezes elaborar mas nós mais adiante no curso provavelmente vamos ter que retomar esse assunto principalmente porque nós precisaremos persistir dado vejam que no momento nosso aplicativo tem uma utilização muito limitada porque cada vez que nós

Recarregamos a página todas as informações se perdem a persistência ela terá que ser feita necessariamente um banco de dados é usando um beck and existem formas de fazer isso nós vamos ver ainda com essa lista de tarefas e essa validação então pode ser feito e deve ser feita também antes de introduzir as informações os dados agora depois da popularização

Dos jovens cript ficou muito prático fazer a atualização também aqui no cliente que é o que nós vamos fazer agora de forma que quando os dados chegarem para armazenamento no banco de dados a maior parte já esteja validada e se ainda houver alguma inconsistência ela seja mínima para evitar esse vai e volta agilizando então a utilização do aplicativo existem

Duas técnicas fundamentais para efetuar a validação o primeiro a técnica é impedir que o usuário entre dados incorretos e a segunda é apresentar mensagens de erro para que ele saiba o que está acontecendo porque você vai bloqueá-lo então essas duas coisas têm que ser usadas em conjunto para apresentação das mensagens eu vou me recorrer novamente o reactstrap

Ele tem esse componente alex e esses aqui com esse dismiss que você pode fechar a mensagem observa em que o resto step tal como o bootstrap de onde ele descende é muito prático para a gente desenvolver rapidamente um aplicativo com uma aparência bastante razoável tem gente que critica porque acha que é fica tudo com um cara igual mas para aplicativos de exemplo numa

Aula como é o caso aqui é a coisa fica uma aparência bem legal e a gente não fica perdendo tempo com o css que é um complicador a mais e pode focalizar toda nossa atenção no aprendizado direct e a nossa intenção aqui vamos adiante então com a implementação da validação da entrada no nosso input acho que os mais perspicaz aí da classe já perceberam que nós

Temos um probleminha aqui quando eu tento adicionar uma e em branco ele aceita e apresenta uma maneira horrível aí porque nós não demos um mínimo para a altura de linhas com a formatação toda esquisita e também não tem sentido ficar inserindo tarefas em branco certo galera então a primeira validação que nós temos que fazer aqui é impedir que o usuário entre

Adicione uma tarefa em branco aqui no nosso código quando a gente vai fazer o submit nós já estávamos fazendo um teste para impedir a entrada de um elemento vazio o problema é que nós temos feito isso antes de acrescentarmos a edi e aí nós estamos simplesmente comparando aqui a nova tarefa que o objeto nova tarefa que consiste de um texto e de uma rede para ver se

Ele está no se ele devolve um valor no e isso não não está mais sendo verdade porque eyed agora ela está a mexida então o que nós precisamos fazer aqui é mudar aqui a nossa nova tarefa para ponto texto para nós vamos comparar agora se o texto da tarefa que está aqui no input está vazio vamos salvar aqui e vamos ver se nós conseguimos adicionar agora não entra

Mais então usuário está sendo impedido de acrescentar algum valor porque nós fazemos essa validação só que ele fica agora em dúvida aí o que que tá acontecendo porque que não tá entrando travou não travou né então nós precisamos ir para segunda parte da técnica que é apresentar uma mensagem para ele porque que não tá funcionando porque que tá travado

E quem poderá argumentar bom mas o cara pode vir aqui digitar alguma coisa adicionar vai ver que tá tudo funcionando normalmente ele vai deduzir que o problema que não pode deixar em branco mas nunca é bom deixar o usuário deduzir alguma coisa né gente ele pode ser tentado sempre quando a coisa travar a partir para a força bruta e dar um reset ou seja ligar e desligar

Para ver se a coisa volta a funcionar e aí a gente acaba transformando um probleminha um problema mal vão por mim quando a coisa para é sempre melhor avisar vamos então criar um componente para apresentar uma mensagem de erro e como eu disse nós vamos usar esse componente aqui do reactstrap os alerts tão aqui em compor com os criar um novo arquivo que eu vou chamar de

A um alerta ponto js aqui nós vamos criar uma classe funcional seguindo esse mesmo padrão que nós estamos usando é bom manter uma consistência no código isso também é uma boa prática e aqui então nós vamos ter que importar as componentes a ler do rex step e nos importar ele aqui e vamos usar um aqui com essa cor danger que essa cor vermelha eu tenho essa aqui né

Passar por vermelha fica mais condizente com uma mensagem de erro ao copiar isso aqui colar aqui salvar e vamos ver se a gente consegue apresentar aqui vamos colocar aqui na classe tarefas primeiro vamos importá-lo é import um alerta from time componente nessa pasta alerta mesmo esse é o arquivo então vamos colocar aqui depois do componente tarefa que apresenta a linha

Da tarefa vamos apresentar aqui esse componente alerta e a você tá aparecendo aí só salvar está eu componente deslizada gellert então agora nós podemos usá-lo no nosso aplicativo vamos abrir aqui o arquivo o alerta como nós vamos chamá-lo de outros componentes nós vamos passar alguns argumentos nas próteses vamos colocar dois aqui isval o e messenger a gente vai

Começar os agora essa terminologia em inglês para deixar essa aparência mais profissa no nosso código depois vamos voltar a falar um pouco sobre essas boas práticas que devemos adotar uma delas é essa bom então aqui como nós vamos receber duas próteses uma é para verificar se ele vai ou não ser apresentado voltando aqui no reactstrap vejam que é as propriedades

Aqui desses alertas uma delas essa ezopen aqui que é um booleano e a exatamente o que exibir ou não essa janela de alerta então nós vamos usar sua propriedade snow para setar essa propriedade is open do componente alert tão e quem vai ser o gol ao nosso easy bom já perceberam que nós vamos passar com o argumento do componente que chamar o alerta então ele vai passar

Uma propriedade que vai ser falsa ou verdadeira se for falsa ou alerta não é exibido se for verdadeiro ocorre o contrário e aqui essa message nós vamos usar para substituir esse texto aqui dinamicamente então aqui nós vamos passar a messenger salvar voltar aqui então ele está apresentando vazio e não tá recebendo nenhum argumento da nossa do nosso componente classe

Tarefas que tá chamando ele aqui então nós vamos começar passando aqui um is visible on é igual é falso quando eu passo aqui desapareceu porque o falso está sendo passado como argumento agora é só propriedade os visible’ que nós colocamos aqui estamos desestruturando das próteses então quando os visito é falso o estou bem não apresenta a mensagem funcionando

Tudo belezinha bom como nós vamos ter que controlar então esse estado da mensagem de alerta nós vamos precisar criar aqui um outro estado para ser controlado então depois aqui do tarefa atual vamos colocar um outro estado aqui nós vamos chamar de input hero on o que nós vamos tratar inicialmente fumo falso de salvar aqui e agora a gente pode até fazer o seguinte em

Vez de usar o falci vamos está funcionando lá os dias ponto state ponto input ever salvará que não aparece a caixa de texto se eu mudar o estado aqui para tro ela é exibida e aqui nós vamos já em inserir também uma mensagem nas suas passar aqui como argumento para esse componente alerta que vai receber como próprios lá a nossa messenger vai ser igual e vamos não

Pode ficar em branco salvar já tá aparecendo agora a mensagem aqui na nossa caixinha de alerta então agora gente tudo vai consistir em nós se controlarmos essas estado aqui que inicialmente nós vamos deixar como falso mesmo e nós precisamos agora é um jeito de manipular isso quando nós dermos aqui um submit acionando esse botar onde adicionar ele não fica em branco

Mas apresente a mensagem de erro para o nosso usuário na lógica para isso a maior barbada aqui no renda o submit nós já estamos então fazendo o teste quando não é vazio ele insere a tarefa então basta aqui nesse if nós não seríamos um é alce ou seja no caso contrário caso esteja vazio aos homens por a 15 pontos é este o estado que nós vamos mudar ou impuros

Era que nós vamos passar para trocar a verdadeiro passa isso vamos salvar aqui e para adicionar agora ele me avisa que não pode ficar embora só que precisamos dar um jeito de esconder isso quando ele começar a digitar alguma coisa né a uma adicional a tarefa não pode continuar essa mensagem aparecendo aqui vamos fazer isso aonde aqui no hello challenge o renault em

Dia quando ele começa a mexer aqui no input né então aqui nós vamos fazer a desativação da mensagem de erro nós vamos acrescentar a mudança do input power para falso um salvar se eu tentar adicionar em branco aparece a mensagem de erro a hora que eu começo a digitar alguma coisa apaga se eu tentar adicionar em branco aparece a mensagem de erro depois da mensagem

O meu ser adicionar alguma coisa apagou funcionando legal perfeito sem dar muito trabalho em gente a pena sair com um estado e um componente zinho bem legal do whatsapp onde conseguimos implementar aqui apresentação de mensagens de erro evitando a entrada de tarefas em branco que é o que nós queremos ainda ter um probleminha aqui é o seguinte vamos supor que o edith

Essa última tarefa aqui e apague tudo lá pronto voltamos ao problema aí de deixar uma tarefa em branco mas isso eu vou deixar por conta de vocês acharam um pouco a moringa para ver como resolver esse problema é bem parecido com o que nós fizemos até aqui na sala e validação e aí na próxima aula na introdução a gente resolve esse problema mas dá uma chance e

Vocês queimaram os neurônios aí para resolver a questão certo galera eu agradeço muito a presença de vocês nessa aula espero que tenha e se gostaram deixa o seu like aí que ajuda bastante compartilha então o principal para ver mais gente aqui e também se inscreva no canal ative o sininho para serem avisados de novos vídeos e todos os links inclusive para o meu

Repositório do kit hamp como sempre estão aí na descrição do vídeo um abraço para vocês até a próxima

Transcrito do video
React Essencial – aula 17 By Vovotoqueiro

Posts Relacionados:

ISSO É ESSENCIAL NA VIDA [e aumenta a testosterona] Mitologia Egípcia: O Essencial – Rá – Anúbis – Hórus – Seth – Osíris – Toth – Foca na História Vampiros da Vida Real por Carol Capel, React, Reagindo, Exposed ESTOU TOMANDO ISOTRETINOÍNA (ROACUTAN)| PRIMEIRA SEMANA | MOTIVO DE COMEÇAR A FAZER REACT