Formulários de gancho do React: manipulação de formulários mestres no React

1. Introdução ao curso: Bem-vindo a este curso sobre como dominar os formulários react Hook. Sou Fazal e estou entusiasmado por ser um guia nessa jornada em que aprenderemos como você pode gerenciar formulários de forma eficaz no Agora, gerenciar formulários pode ser uma tarefa complexa e tediosa, e é por isso que estou entusiasmado apresentar o formulário react Hook, que é uma ferramenta que revoluciona Ao longo deste curso, exploraremos tudo, desde formulários básicos até técnicas avançadas de validação, tornando o tratamento de formulários mais simplificado e eficaz Aborde muitas coisas, como introdução aos formulários no react. Falaremos sobre os formulários react hook, básicos em que abordaremos os detalhes do gerenciamento de formulários com o react hook form e como essa biblioteca chamada react Hook Form como essa biblioteca chamada react Também entenderemos as técnicas de validação e como você pode implementar validações robustas Aprenderemos sobre aprimoramentos de desempenho e posso garantir que, ao final deste curso, você terá todas as ferramentas e conhecimentos para criar formulários poderosos e fáceis de usar no react Para quem é esse curso? Portanto, este curso é perfeito para quem deseja aprimorar suas habilidades de reação Agora, se você é iniciante ou alguém que deseja aprofundar seus conhecimentos ou gerenciar formulários no react, todos podem se beneficiar desse Este curso é totalmente prático e, o que quer que estejamos aprendendo, aprenderemos dando uma olhada em exemplos reais. Então, estou super empolgada em levar você nessa jornada emocionante. Espero que você também esteja animado e nos vemos do outro lado. 2. Começando: formas no React simplificadas: Então, agora é hora de falar sobre os formulários e como você pode gerenciar os dados do formulário no react. Então, o que vamos fazer é criar um formulário básico e aprender sobre os detalhes do gerenciamento de formulários ou gerenciamento de dados com o Formulários formulários ou gerenciamento de dados com o Formulários Então, aqui eu tenho um projeto de react wheat muito simples, você pode ver, e é um código muito simples. No clichê inicial, fiz uma pequena limpeza no aplicativo JSX, como você pode ver, ok como E app.j6 está sendo renderizado em ponto médio Jx aqui com o Feche isso. E aqui eu tenho um CSS, que é um CSS muito básico. Não é nada demais. Estou definindo a margem para zero pixels para todos e, em seguida, para Dev, estou adicionando flex, a exibição de flex, justificando tudo no centro. Tudo bem. Então, vou fechar isso e vamos nos concentrar no app.j6. Tudo bem. Eu tenho o servidor em execução e você pode ver a saída no lado direito. Tudo bem? Agora, o que eu vou fazer é adicionar um campo de entrada muito simples, e vamos construir sobre isso. Tudo bem. Então, o que eu faria aqui está aqui. Está bem? Vou dizer form, o porque o campo de entrada tem que estar dentro da tag Fm, ok? Então esta é a nossa etiqueta Fm, tudo bem. E vou dizer que , ao enviar aqui, enviar, precisamos enviá-lo em algum lugar. Está bem? Portanto, precisamos ter uma função que lide com o envio. Mas, por enquanto, vou manter isso vazio e vou preencher esse lugar mais tarde. Vou adicionar uma etiqueta aqui, ok. E o rótulo será o nome. OK. Deixe-me ver se isso funciona. Vou receber um erro. Então, deixe-me adicionar essa função também porque não veremos a saída, então vou dizer manipule o envio aqui, envie algo assim. E aqui dentro do componente, vou dizer const, handle submit, algo assim, e vou ter uma função mt arrow aqui, adicionada Tudo bem. Portanto, nada acontece no momento, pois precisamos definir a lógica de como o envio funcionaria. Tudo bem. Agora, esse rótulo está lá, ok? Temos a tag de fechamento do rótulo e vou adicionar uma entrada aqui. OK. E eu vou dizer que a entrada é do tipo texto. Está bem? Então, o tipo é texto aqui, e eu vou dizer que nome é nome aqui. OK. Então, isso tem aspas simples simples é melhor ter a consistência aqui. Isso é nome. Eu terei valor aqui. Agora, o que é valor? Valor, precisamos atribuir. Ok, então eu vou ter zero aqui, algo assim. OK. Mas esse não é o nome real. Precisamos vinculá-lo a algo ou a um teste, se criarmos. Está bem? Então, eu vou dizer que sobre a mudança, precisamos lidar com a mudança aqui. Está bem? Então, na mudança, o que acontece? Vou mencionar isso também. Está bem? Agora, vou falar aqui e vou dizer lidar com a mudança. Algo parecido com isso. OK. Então aqui eu tenho, você sabe, esse campo que foi adicionado, ok? Agora, o que estou fazendo é usar esse valor de valor, o que ele faz é vincular o valor inicial aqui On change acionará o evento onchange se houver alguma alteração nesse campo específico, ok? E agora estou vinculando, como na mudança, chame essa função específica de handle change E essa é uma função que vai lidar com a mudança para nós, ok? Podemos ter alguma lógica aqui, ok? Então, ao lidar com a mudança, o que posso fazer é aceitar o objeto do evento aqui. OK. E eu posso dizer que o log de pontos do console está aqui, ok? E eu posso dizer o valor do ponto-alvo do ponto E. OK. E aqui, se eu entrar, tudo bem, acho que isso deve ficar bem agora. Deixe-me salvar isso. Deixe-me ir para inspecionar. Devemos ver o registro como e quando estamos basicamente como e quando estamos digitando Então, vou fazer uma atualização completa para que todos os erros desapareçam. OK. E eu vou apenas dizer, para que você possa ver, eu estou digitando coisas Opa. Então, basicamente, isso tem um valor zero, basicamente. Então isso é um problema aqui. Se eu comentar isso, deixe-me comentar isso. OK. E agora, se eu digitar, tudo bem, posso dizer que amo. Você pode ver a reação. Você pode ver como está sendo acionado. Então, está imprimindo tudo toda vez que eu digito cada tecla pressionada aqui. Está bem? Então é isso que está acontecendo aqui. Agora, valor aqui que eu comentei, ok, é um atributo de entrada que controla qual texto é mostrado dentro do campo de entrada. Está bem? Então, se eu vincular a zero, se eu disser zero aqui, você verá zero aqui, como estávamos vendo. E normalmente o campo de valor geralmente é usado para vincular um campo específico a uma variável de estado. Está bem? Ainda não criamos uma variável de estado, que criaremos em breve, mas é por isso que o valor está sendo usado e eu comentei isso até que tenhamos o estado da variável sendo criada, ok? Na mudança aqui, o que ele faz é ser um manipulador de eventos que rastreia a alteração no campo de entrada Portanto, toda vez que o usuário digita ou edita a entrada, a função on change é acionada, permitindo que você atualize o estado com o novo valor de entrada Está bem? Então, aqui, agora, ainda não estamos brincando com o State, mas o que estamos fazendo é mudar, estamos vendo uma mudança no identificador, e essa função é acionada toda vez que há alguma alteração no campo de entrada. E o que estamos fazendo para lidar com a mudança? Estamos aceitando o objeto do evento e dizendo o valor do ponto alvo, que está nos dando o valor que está lá no campo de texto, ok? Então E basicamente representa o objeto de evento que é passado para a função quando o evento ocorre, e evento pode ser qualquer coisa como clicar em um botão ou digitar em um campo Essas são algumas noções básicas de como esse código está funcionando até agora. Está bem? Agora, o que vamos fazer é vincular tudo a um estado. Então, vou dizer const, vou dizer dados do formulário. Então, essa é uma estatística que estou criando e os dados do formulário basicamente me ajudarão a armazenar os dados de todo o formulário Portanto, pode haver vários campos no formulário. No momento, estamos tendo um único campo. Poderíamos ter vários campos e poderíamos ter ou usar os dados do Formulário para armazenar tudo. Está bem? Então, vou dizer que os dados do formulário estão aqui. E o que vou fazer agora é usar o estado de uso aqui, usar o estado, algo assim, e inicializarei isso com alguma coisa OK. Então, aqui, eu vou ter um objeto. Vou inicializá-lo para objetar e usarei pares de valores-chave OK. Então, isso estará vazio. O nome estará vazio. Se amanhã houver vários campos, vou me certificar de atualizar esse objeto aqui. Está bem? Espero que isso esteja fazendo sentido. Está bem? Então esse é o nome aqui, e eu vou tê-lo desta forma. Está bem? Então isso parece melhor para mim. OK. Então, sim, esses são os dados do formulário aqui, e agora o que precisamos fazer é o que eu faria, eu diria sobre como lidar com a mudança, ok? Estamos tendo o valor aqui, alvo líquido, valor do ponto alvo. Está bem? Então, o que vou fazer é chamar dados do formulário definido. Porque em cada alteração, quero ter certeza de que a variável de estado tenha os dados atualizados. Por aqui, vou dizer dados do formulário. Então, primeiro desestruture os dados do formulário, quaisquer que sejam os dados que ele tenha, adicione-os Está bem? E então o que você faz é adicionar colchetes, nome do ponto-alvo aqui, ok, adicionar dois pontos e dizer o valor do ponto-alvo do ponto E. Opa, valor. Ok, esse tipo de sugestão não é bom, mas o valor do ponto-alvo e vou adicionar aqui. Está bem? Agora, o que essa função faz é ou esse trecho de código faz está aqui. Então, isso fica claro quando isso é chamado de mudança de alça. Sempre que você altera alguma coisa no campo, o identificador de mudança é chamado. Ele passa pelo objeto do evento, que tem os detalhes de todo o evento, certo? Então, o que estamos fazendo aqui é ver dados de formulários definidos. Ok, desestruture os dados do formulário atual. Está bem? Então, com esse operador de propagação, estamos dizendo que mantenha os valores existentes dos dados do formulário, para que eles se espalhem Está bem? E então estamos recebendo o nome do campo aqui. Agora o nome está aqui se você rolar para baixo, é o nome, certo, que também é o atributo aqui, certo? O atributo e isso devem corresponder aqui. O nome e esse nome devem coincidir com a chave aqui, certo? Então, isso está combinando. Então, estamos vendo ponto E, o nome do ponto alvo, dois pontos e o valor do ponto alvo Está bem? Então se torna o nome dois pontos, seja qual for o valor que você digitou, ok E quando você adiciona isso, o que acontece é que o campo mudou porque é desse campo que estamos falando. O campo que foi alterado será substituído dentro desses dados espalhados aqui. Isso é o que vai acontecer. Definir dados do formulário sempre selecionará os dados mais recentes existentes e atualizará o estado do formulário. Vamos testar se está funcionando bem. Vou fazer uma atualização completa. OK. E o que eu vou fazer é , ok, na verdade estamos usando dados do formulário. Está bem? O que podemos fazer é aqui, ainda não estamos fazendo uso do estado. Está bem? Então, o que faríamos é se você rolar para baixo, não estamos vendo nenhum tipo de erro aqui. Aqui está o valor. Deixe-me descomentar isso Agora temos um estado, certo? Então, eu posso dizer o nome do ponto de dados do formulário, algo assim. Agora estamos vinculando isso a uma variável de estado, basicamente. Se eu atualizar, você não verá nenhum tipo de erro e poderá digitar Então você pode dizer teste. Você pode ver tudo entrando no console. Aqui, em vez de imprimir o valor do ponto alvo e, o que podemos fazer é tentar imprimir o nome do ponto de dados do formulário aqui. OK. Vamos fazer uma atualização completa e, em seguida, você pode dizer teste Você pode ver como os dados atualizados estão chegando. Ok, então isso está um passo atrás, digitamos T e T não chegou porque a atualização para T está sendo feita depois que o valor é impresso Está bem? Então, se você mover essa linha depois de atualizar o estado aqui. Ok, então nesse caso, você vai ver a última coisa. Está bem? Então, se eu disser teste, você pode ver, opa, ainda é o mesmo aqui Ok, então é porque as atualizações são assíncronas, ok? E você está, na verdade, na mesma função. Você está tentando imprimi-lo no console, ok? Mas o estado está sendo atualizado perfeitamente, ok? Não há nenhum problema como tal, então vou me livrar desse registro de pontos do console por enquanto, ok? Agora, vamos lidar com a submissão aqui. OK. Então, o que acontece quando você envia o formulário? Tudo bem. Agora, quando você enviar o formulário, primeiro diremos O ponto E para evitar o padrão. OK. Agora, o que é E aqui? Não estamos aceitando E, então precisamos aceitar o pai, desculpe, precisamos aceitar o parâmetro do tipo E do nome E, que é evento. Eu vou dizer para evitar o padrão, estamos fazendo isso porque não queremos o comportamento padrão aqui. Portanto, o comportamento padrão ao enviar nos navegadores é o recarregamento da página. Eu não quero isso. Está bem? Então, eu simplesmente vou fazer o log de pontos do console. Eu vou dizer que os dados do formulário foram enviados. Aqui e aqui, dados do formulário, algo assim. Ok, você fez isso, e agora, se você rolar até aqui, ok, precisamos adicionar uma maneira aqui para as pessoas enviarem o formulário. Então, o que eu vou fazer é aqui no final, eu vou ter um botão. Ok, vou chamar isso de botão de envio, e o tipo desse botão é enviar. Está bem? Algo parecido com isso. Deixe-me atualizar aqui, S e refrescar. Tudo bem. E podemos ver que o nome é I love react. Está bem? Deixe-me enviar. Você pode ver os dados do formulário e ver a variável de estado atualizada. Você pode ver que o nome é I love react. Tudo bem. Então, sim, está funcionando perfeitamente bem, como você pode ver aqui, ok? Como é esse estado, o que é esse estado? O que esse estado faz? Esse estado está acompanhando os dados que existem no formulário, o e estamos fazendo uso do objeto, que consiste em pares de valores-chave, certo? E como é acompanhar os dados? Ele está acompanhando a mudança de controle com a ajuda de uma alça. Então, no identificador, a mudança é acionada no evento de mudança, ok? Então, sempre que houver alguma alteração na caixa de entrada, alteração do identificador é acionada e, basicamente, está atualizando essa coisa aqui. Basicamente, está atualizando os dados do formulário aqui. Você pode ver. E os dados do formulário sempre terão as últimas novidades tudo o que você digitar estará lá nos dados do formulário, ok? E então está lidando com o envio. Como está lidando com o envio? Sempre que isso é atingido, está dizendo evitar padrão e está apenas imprimindo o valor atualizado nos dados do formulário. OK. Vamos ver como isso funcionará se você tiver mais um campo aqui. OK. Agora, se você tiver mais um campo, deixe-me duplicar isso aqui Eu vou ter isso. Em vez do nome, agora eu tenho um e-mail aqui, ok? E o tipo é e-mail. OK. Eu vou dizer e-mail. O nome também é email aqui, data dot email do formulário aqui, e o identificador de alteração é o mesmo. Está bem? Forme um e-mail com pontos de dados, então precisamos agregar mais um valor aqui, certo? Então eu vou dizer aqui. Vou dizer vírgula e vou adicionar e-mail, algo assim. Ok, isso está feito, e eu vou fazer assim. Tudo bem. Então isso está feito, certo? Eu também tenho e-mail agora. Agora vamos fazer uma atualização completa, e eu posso digitar IOveract, digamos john em rate Opa, example.com. Deixe-me enviar. No momento em que eu enviar, você verá que o nome é I love react e o e-mail é jon at rate example.com Espero que isso esteja fazendo sentido. Agora, o número de campos que você tem, o número de atributos que você vai adicionar neste objeto de estado aqui, ok? Então, esses dados do formulário farão o trabalho de lidar com todos os dados do formulário para você, ok? E essas duas funções ajudarão você a gerenciar os dados, tudo bem, como o envio funciona, como a mudança funciona e tudo mais. Está bem? E o formulário pode continuar crescendo de tempos em tempos, certo? Então, espero que você tenha conseguido acompanhar e espero que tenha sido útil. 3. Solução de problemas: armadilhas comuns em formulários básicos do React: Então, agora é hora de começarmos a melhorar esse formulário que construímos, certo? E vamos adicionar algum tipo de validação nesse formulário específico, certo? Porque, você sabe, quando estamos trabalhando com formulários, as validações de formulários são comuns, e talvez você queira validar os dados que o usuário está preenchendo nos formulários, certo Então é isso que vamos fazer. Então, o que eu vou fazer aqui é ter uma função aqui, definida, ok? Eu vou dizer const, validate. Ok. Então essa função de validação é uma função de seta aqui e eu vou ter a lógica dentro dessa função Então, o que eu vou fazer é primeiro. Portanto, a validação nos dará erros, e talvez queiramos acompanhar os erros. Então, primeiro, vou dizer const aqui. Vou criar um estado chamado errors e vou chamar set errors. Ok. Agora isso vai nos ajudar a acompanhar todos os erros que estão acontecendo aqui, ok? Vou inicializá-lo com pares de valores-chave vazios, certo? E dentro de validar, o que vou fazer é criar novos erros constantes e criar um objeto vazio de par de valores-chave, ok Tudo bem E agora o que vou fazer é dizer se vou ver os dados do formulário. Preciso verificar se o nome foi preenchido pelo usuário ou não. Quero fazer com que o nome seja preenchido obrigatoriamente. Então, eu vou dizer dados do formulário nome do ponto ponto Trim. Ok. Se esse valor não existir, adicionarei uma exclamação Se esse valor não existir, é isso que essa condição está verificando. Direi novos erros no nome do ponto e direi que o nome é obrigatório. Está bem? Então, vou dizer que o nome é obrigatório, algo assim. Tudo bem E o que eu faria é retornar novos erros. Ok. Então, eu retornaria novos erros, certo? Algo parecido. Então essa função, o que ela faz é criar mensagens de erro. Ele está validando e criando mensagens de erro e nos retornando o par de valores-chave, ou devo dizer Então, aqui, o que está acontecendo é um novo nome de ponto de erro. Então, isso vai ter um atributo de nome com essa mensagem. Mas está nos dando um objeto essencialmente com todas as mensagens de erro, e a chave é basicamente o nome do campo aqui, que é campo de nome. Então, aqui você pode ver que esse é o campo do nome. Certo? Agora, o que precisamos fazer é acionar essa validação aqui Está bem? Agora, quando devemos acionar a validação Então, veremos no handle submit. Está bem? Vou dizer const, erros de validação Ok, erros de validação são iguais a validar, ok? Algo parecido com isso. Tudo bem E eu direi se terei que verificar se os erros de validação têm algum par de valores-chave. Então, eu vou dizer chaves ensinadas por objetos. Então, se o objeto tecla de ponto para erros de validação, tudo bem. A duração ensinada é maior que zero aqui. Ok. Então, o que precisamos fazer é realmente dizer erros definidos. Ok, vou definir erros e vou dizer erros de validação. Assim. Ok. Caso contrário, o que faremos é enviar o formulário, certo? Se não houver erro de validação , precisaremos enviar o formulário. Então, opa Então, vou colocar essa coisa aqui e cortar isso e mover isso para dentro do bloco se, porque o formulário só precisa ser enviado quando não há erros de validação. Tudo bem? Algo parecido com isso. Está feito. Ok. E sim, acho que é isso. Também precisamos exibir as mensagens de erro. Está bem? Então, vou rolar para baixo até aqui. Ok. E aqui, ao lado do nome, ok? Ao lado do nome na mudança da alça. Ok, eu vou ter um código aqui. Vou dizer que os erros estão tensos, nomeie aqui. Se houver erros, dot name, e eu vou fazer uso do lógico and, e vou dizer span e vou terminar a tag span aqui e vou dizer errors, Tt, name, algo assim. Ok. Então, agora, se houver algum erro, ele será exibido aqui, ok? Então, isso é mostrado somente se isso for verdade. Se os erros existirem apenas no nome do ponto , isso será mostrado. Caso contrário, não será exibido. Está bem? Se eu enviar isso, não estou vendo nada no momento. Então, provavelmente não está funcionando porque acho que cometi um erro aqui no Trim Então, aparar é basicamente uma função. Sinto falta dessa precessão redonda aberta e fechada. Ok. Deixe-me refrescar. E se eu disser enviar, você verá que o nome é obrigatório. Tudo bem E está sendo exibido de uma forma estranha porque literalmente não há CSS que eu esteja usando Ok, CSS muito básico. Mas você entende como isso funciona, ok? Você pode adicionar CSS de acordo com sua escolha, se desejar. Tudo bem Então, o que eu posso fazer é aqui em extensão, posso dizer estilo aqui, aqui mesmo. Eu posso dizer que dentro disso, eu posso dizer cor, certo. Assim. Ok, então você pode ver que agora está na cor vermelha, certo? E, sim, você tem os erros sendo exibidos, ok, aqui. Para ajustar as coisas em uma nova linha ou ter uma quebra de linha aqui, o que posso fazer é depois que o elemento span for renderizado, posso adicionar uma tag de quebra de linha aqui, assim Ok. Portanto, isso garantirá que as coisas estejam na nova linha, corretamente, e que a mensagem de erro seja exibida dessa forma. Mas você pode ver como o nome é obrigatório é inserido e eu posso digitar. Eu posso dizer teste e posso ver o envio. Está bem? Opa, ainda está lá. 1 segundo Deixe-me verificar. Então teste. Isso está funcionando bem. E se eu me livrar disso, ok, isso não está lá. E então, se eu digitar, isso ainda está lá. Portanto, isso não está sendo apagado porque os novos erros ou o estado de erro aqui não estão sendo eliminados Ok, então não estamos atualizando enquanto eu digito os dados, certo? Então, o que precisamos fazer aqui é alterar o identificador, ok, enquanto estamos digitando os dados ou enviando o identificador Ok, então é melhor eu lidar com isso na mudança de alça aqui. Então, aqui para lidar com a mudança, o que vou fazer é criar um conceito aqui. Ok, e eu vou ter o valor do nome. Ok. E eu vou dizer que não somos um alvo. Está bem? Então, o que estou fazendo é obter o nome do campo e o valor de onde a mudança está acontecendo. Está bem? Isso é o que eu estou fazendo aqui com isso, ok? E depois que os dados do formulário forem definidos, vou dizer ok, se houver algum valor para erros e nome, OK, onde a mudança está acontecendo. Ok. Então, nesse caso, digamos que conste novos erros, então eu vou desestruturar os existentes, ok. Reestruture os existentes. Tudo bem E então o que podemos fazer é dizer excluir novos erros e dizer nome. Ok. Isso é um pouco de manuseio por aqui. Está bem? E eu vou dizer definir erros, e eu vou definir o novo objeto de erro, vou dizer novos erros. Assim. Ok. Isso está feito. E agora, à medida que mudamos, você verá que o erro está sendo eliminado Está bem? Se eu me livrar disso e disser enviar, nome é obrigatório, e se eu disser que adoro reagir, o erro desaparecerá. Você pode ver como isso é dinâmico. Ok. Você também pode atualizar isso e melhorá-lo em outros campos. Mas para esse único campo, você também teve muito trabalho, certo? Então você pode imaginar como as validações podem ser complexas aqui Ok. Então, o objetivo aqui de fazer tudo isso e mostrar para você era mostrar como os formulários podem ser construídos no React sem usar nenhum tipo de biblioteca aqui, como formulários em gancho, ok? Então, se você estiver gerenciando formulários sozinho no react, isso é tudo que você terá que fazer, ok? Você pode ver como um formulário com apenas dois campos que você tinha tanto para escrever. Há muitas duplicações de código, certo? Então, para campos múltiplos, a função de mudança de alça aumentará de tamanho, certo? Haverá muito código lá. Para validação, você precisa adicionar mais validações, ok? Então, por exemplo, aqui, estamos adicionando validação na função validate para nome, ok? Você também precisa adicionar uma validação semelhante para e-mails. Está bem? Agora, envie um e-mail, se você quiser adicionar algum tipo de validação complexa, como verificar, adicionar a taxa e o formato do e-mail, você terá que escrever tudo isso. Ok. Então, isso adicionará muita complexidade aqui. Esse método também vai crescer, ok? E com muitos campos, imagine como será a renderização, certo? Vai ficar complicado Então, sim, esse é o problema que eu quero destacar aqui. Bem, uma abordagem seria mostrar a você diretamente , usando formulários de gancho de reação e explicando como é fácil de usar, ok? Mas eu queria passar pelo caminho mais difícil primeiro, ok? Você entende isso primeiro sobre como as coisas estão sendo gerenciadas no React usando JavaScript. Ok. Então, eu também estou usando o código JavaScript e recursos de reação, como estados, aqui. Está bem? Como as coisas estão sendo gerenciadas no React usando JavaScript. Ok, isso você precisa entender primeiro. Só então você entenderá a importância. Então, se você passar por isso, só então entenderá a importância de usar formulários de hook de reação ou alguma outra biblioteca, certo? Então isso é algo que eu queria destacar. Tudo bem Então, espero que você tenha uma ideia de como fazer validações, lidar com envios e gerenciar mensagens de erro com react e mensagens de erro com react 4. Desbloqueando poder: um mergulho profundo na forma de gancho do React: Oi, aí. Então, agora é hora de começarmos a falar sobre os formulários react Hook. Portanto, se você pesquisar no Google o formulário React Hook, você será direcionado para esta página da web ou encontrará este link no google.com ou em qualquer mecanismo de pesquisa favorito de sua escolha Então reacthokfm.com. Este é o site aqui. Certifique-se de anotar os hífens aqui. Está bem? Agora, isso é o que vamos usar aqui, e você pode ver que é uma solução flexível, extensa e fácil de usar com validação para formulários de reação. Tudo bem? Há muitos recursos que eles destacam aqui. Eles também têm uma versão sandbox de código aqui para você editar e brincar, ok? E você pode ver os recursos, isso isola a renderização. Portanto, há uma minimização da renderização, ok? Você se inscreve, ok? Portanto, o desempenho é um aspecto importante da experiência do usuário. Assim, você pode inscrever campos de entrada individuais sem renderizar novamente o formulário inteiro, ok? Então, aqui, é um valor rápido. Portanto, ele oferece muitos benefícios em comparação com o gerenciamento tradicional de formulários e o React. E se você começar, encontrará alguns trechos de código aqui. Está bem? Então você pode usá-lo para JavaScript, datilografado, ok, dependendo de sua necessidade Tudo bem Então, vou selecionar JavaScript aqui porque você está usando o react. E aqui, você pode instalá-lo dessa maneira. Portanto, é uma biblioteca externa que você está usando e usando o gerenciador de pacotes NPM Você pode instalá-la em seu sistema e adicioná-la ao seu projeto aqui Ok. Agora, aqui estão algumas coisas que você precisa ter em mente sobre como isso funciona. Então, a primeira coisa é se você tiver um formulário criado, tudo bem. A primeira coisa é que você precisa importar esse gancho. Ok, você precisa adicionar esse gancho. Então você precisa obter essas funções dependendo do que você quer, ok? Então, função de registro. Existem diferentes funções que você obtém do formulário de uso e do formulário uso que você está obtendo do formulário de gancho de reação aqui. Ok. Agora, o registro é algo que permite registrar um elemento de entrada ou qualquer tipo de elemento basicamente para reagir a formas de gancho. E quando você se registra, o que acontece é a validação e tudo é gerenciado, até mesmo o envio é gerenciado pelos formulários react hook. Está bem? Então, o registro é uma forma de você fazer com formulários do React Hook gerenciem esse elemento específico para você dentro do formulário, ok? Ele também lida com o envio. Então, aqui você tem o controle de envio, como você pode ver, e o tratamento de envio assume qualquer função de sua escolha que você repasse. Está bem? Então, essa é uma função que estamos transmitindo. É a função de seta. E qualquer função que você passa é acionada após as validações e tudo mais pelos formulários react Está bem? E também, se você ver aqui, você está neste campo. Você pode ver o cólon necessário verdadeiro. Está bem? Então, se você quiser que esse campo seja obrigatório, tudo bem, então você pode ter dois pontos verdadeiros obrigatórios como o atributo aqui E diz: inclua a validação com as regras obrigatórias, ok, e outras regras de validação HTML padrão, ok? E você pode exibir os erros dessa forma. Tudo bem Você pode ver como os erros estão sendo exibidos. Exemplo de erro obrigatório. Então você tem acesso aos erros aqui. Ok. Então, tudo isso é resolvido automaticamente, e se você rolar até aqui, se você for aplicar a validação, você pode ver que esses são todos os campos de validação. Ok, você pode ver, esses são todos os campos de validação obrigatórios do padrão. Se você quiser fazer qualquer tipo de correspondência de padrões. Ok, se você tiver algumas regras de validação personalizadas, você pode fazer isso. Você pode definir o mínimo e o máximo para um valor aqui ou para um campo aqui. Tudo isso, sem escrever muito código, basta especificar o que deseja e todo o resto está resolvido. Agora imagine fazer isso em Vanilla JavaScript, certo? Sem usar formulários de gancho de reação. Ok, imagine fazer isso, certo? Então, nós já fizemos isso em um desses aplicativos aqui que você vê. Ok, então eu estou gerenciando. Eu tenho esse formulário aqui e estou gerenciando tudo, então deixe-me em tela cheia, e estou gerenciando todos os erros e validações aqui, mensagens de erro aqui usando essas funções, ok? E, sim, para apenas dois campos, há muito código lá, certo? Então, o que vou fazer é que é um formulário muito simples que eu já tenho. O que vou fazer é reduzir esse formulário para usar os formulários de gancho de reação E coisas como validação e s aprenderão sobre tudo isso aqui, ok? Então, sim, isso é algo que vamos abordar. Está bem? Então, o que vou fazer é, em primeiro lugar, instalar os formulários de gancho de reação. Então você pode copiar isso, ok? E venha aqui, vá até o terminal. Ok. E você pode adicionar essa coisa ou executá-la no diretório raiz do seu projeto. Agora, depois de fazer isso, haverá um pouco de processamento, dependendo da conexão com a Internet, velocidade e do sistema, mas ele deve ser instalado rapidamente. Vou minimizar isso agora. E se você vier aqui para empacotar Jason, verá formulários de hook de reação sendo adicionados Então me deixe aqui. Você pode ver a forma do gancho de reação, certo? Então, isso foi adicionado à nossa lista de dependências. Tudo bem E o que precisamos fazer agora é criar várias funções para lidar com alterações no envio, na validação e tudo Não precisamos de tudo isso. Eu vou me livrar de tudo isso. Está bem? Vou simplesmente deletar tudo isso. Vou apenas cortar esse exemplo aqui, ok? Ao enviar, repassaremos algo, ok? Também não precisamos de valor. Portanto, esse campo de entrada também será reduzido aqui. Ok. Ok. Então, na verdade, eu vou me livrar de tudo isso. Então, aqui. Ok, este será um campo de entrada muito simples agora, ok, entrada e opa Então, acho que vou ter um tanque com fechamento automático. Vou me livrar disso, ok? Ok. E eu vou ter, na verdade, que me deixe fazer uma coisa. Vou colocar o botão aqui, ok? Ou eu só tenho os rótulos. Vou me livrar desses campos de entrada aqui. Está bem? Só quero os rótulos. Ok, então eu tenho a etiqueta aqui. Eu tenho a etiqueta aqui. Ok, estou me livrando de todos os campos de entrada. Há um botão de envio, que é necessário para enviar o formulário. É isso mesmo. Acabei de fazer muita limpeza. Vou me livrar da entrada também na parte superior. Faremos novas entradas sempre que precisarmos, ok? Eu também não preciso lidar com o envio, ok? Agora, este é um formulário que eu tenho versão reduzida bem simples Ok. Vou apenas remover isso. Ainda não há nada no formulário. Eu não adicionei campos de entrada. Está bem? Agora, em primeiro lugar, o que vamos fazer é usar a forma de gancho de reação. Então eu vou dizer Importar, usar o formulário aqui. Você pode ver essa sugestão. Use o formulário do react hook form. Então, vou selecionar isso e você terá que adicionar importação. Ok. Agora, o que você vai fazer é que precisamos, eu vou dizer const. Precisamos nos registrar, e eu direi que use o formulário aqui. Então, usando esse gancho, ok, eu preciso importar ou eu preciso obter essas duas funções. Então, registre-se e eu direi para enviar, ok? Então, essas são as duas funções ou propriedades que você pode dizer. Ok. Essas são as duas funções que você precisa acessar, ok, a partir do formulário de uso. Ok, e é isso que estamos fazendo aqui. Então, depois de ter acesso a essas duas funções como registrar e manipular envio, tudo bem, falaremos sobre elas. Então, o que é registro? Está bem? Por que você precisa se registrar? Portanto, Register é uma função fornecida dentro do gancho de formulário de uso, que é fornecido para espionar o formulário de gancho de reação, e é usada para registrar os detalhes que você deseja que o formulário de gancho de reação manipule. Está bem? Por exemplo, se houver um campo de entrada, talvez você queira registrar esse campo específico com formulário react hook. E por que você quer se registrar? Porque você quer que o formulário react hook gerencie a validação, o envio, tudo. Você deseja que o formulário de gancho de reação acompanhe as mudanças em cada campo de entrada e tudo mais. Ok, então por causa disso, você gostaria de dizer ao React para formar isso, ei, gerencie esse campo específico para mim, certo? Como você diria isso? Você faz isso com a ajuda do registro, aqui. Está bem? Então, deixe-me adicionar um campo de entrada aqui. Então, vou apenas dizer uma entrada aqui, algo assim. Está bem? E vou adicionar uma tag de fechamento automático. Eu não preciso disso. Ok. E aqui, eu vou dizer, vou adicionar cólon, desculpe, não cólon São colchetes redondos. Vou dizer pontos grátis e me cadastrar. Ok. E aqui, eu vou passar o nome, algo assim. É assim que você se registra. Está bem? Então isso está feito, ok? Adicionamos o registro, e o que você pode fazer agora é ter uma função de envio, então posso dizer const ao enviar envio, vou usar a função de seta aqui Ok, algo assim e eu direi log de pontos do console. Está bem? Registro. Vou dizer que os dados estão aqui. Está bem? Então, esses são os dados do formulário que eu quero registrar aqui. Agora, manipule o envio. Então, precisamos dizer ao handle submit que, ei, use essa função para lidar com o envio para mim. Está bem? Então, o que vou fazer é vir aqui para formar, vou dizer, lidar com enviar Opa. Então, 1 segundo. Eu direi no envio, primeiro lugar, no envio. Ok. E você dirá handle submit e dirá on submit, algo assim. Está bem? Isso está feito. Está bem? Agora, o que acontecerá é que sempre que o envio acontecer, ok, você terá essa função acionada com os dados. Está bem? Vamos ver se isso está acontecendo bem. Está bem? Vou verificar isso. Então eu vou para o Console. Eu vou fazer duro ou fresco. Vou esclarecer isso e vou dizer envio do teste. Você pode ver o nome como teste e quantas linhas de código você teve que escrever. Está bem? Você só precisava registrar isso. Primeiro de tudo, antes de se registrar, você tinha que fazer algumas tarefas domésticas importando Você tem acesso a este cadastro e manipula o formulário de envio a partir do uso, ok? E então você acabou de registrar o nome, e agora você está recebendo os dados aqui. Está bem? Agora, o e-mail não está registrado, então deixe-me adicionar um e-mail aqui também. Está bem? Então, se eu disser e-mail, tudo bem. E este é um e-mail para mim, ok. E se eu não registrar esse campo de entrada, ele não funcionará, mas preciso me registrar. Então, eu vou dizer três pontos, qual é a sintaxe Vou ver o registro e vou especificar o e-mail aqui. Vou guardar isso. No momento em que você fizer isso, se você atualizar, se eu enviar, você verá o nome e o e-mail vazios Está bem? Agora, quaisquer que sejam as mudanças que ocorram, ok , teste e A, você verá ambas aparecerem nos dados. Está bem? Você quase não está fazendo nada. Você não está administrando estados, você não está fazendo nada. Está bem? Você acabou de dizer que o react hook forma que, ei, registre isso e resolva isso para mim. Está bem? Agora, o formulário react Hook está fazendo tudo por mim por você, essencialmente. Você tem no submit, você está dizendo handle submit. Este é o identificador de envio do formulário React Hook, e você está fornecendo a função que precisa ser acionada no envio, ok? Porque você pode ter um envio personalizado ou uma forma personalizada de enviar dados, certo? Talvez você queira fazer uma chamada de EPI ou algo assim. Então, depois de todas as validações e tudo pronto, ok, essa função é chamada com os dados Tudo bem Então, para colocar ou resumir tudo, ok? Use o formulário inicializa o tratamento do formulário com o formulário react hook Está bem? Isso é o que fazemos. Cadastre-se, estamos fazendo uso para registrar os campos de entrada para gerenciamento de formulários. Handle submit faz o trabalho de lidar com os envios do formulário e coletar os dados do formulário para nós E ao enviar é uma função personalizada que é acionada no envio do formulário e faz um trabalho simples de registrar os dados do formulário. Tudo bem? Agora, há muitos benefícios usar formulários de gancho de reação, ok. O primeiro benefício que você pode ver nesse código é menos código padronizado Você não precisa escrever muito código para colocar seus formulários em funcionamento. Menos código padronizado e seu componente também parece simples, certo? Melhor desempenho. Agora, um melhor desempenho significa que ele minimiza a rerenderização em cada alteração de valor Então, se houver algum tipo de mudança de valor, se você estiver mudando alguma coisa no campo aqui, ok? No tratamento tradicional de formulários e reações, o que acontece é que o componente é renderizado novamente Mas, em reação aos formulários, o componente é que o formulário não é renderizado novamente toda vez que você digita em um campo, e isso torna seu formulário mais rápido, especialmente para aplicativos grandes As validações são simplificadas. Ainda não abordamos as validações, mas coisas como verificar se um campo está preenchido ou verificar se o e-mail é válido Todos esses tipos de validações padrão estão incorporados. Você só precisa adicionar uma palavra e dizer aos formulários do react hook que, Ei, faça esse tipo de validação e pronto. Funciona para você, certo? Você não precisa escrever coisas manualmente para essas coisas padrão, certo? Então, no geral, isso facilita muito o manuseio de formulários. Isso facilita a coleta de dados do formulário, o acompanhamento deles, e você não precisa atualizar manualmente o estado cada campo de entrada, como acontece com os formulários de reação regulares. Tudo bem Resumindo, isso torna sua vida muito mais fácil. Tudo bem? Espero que você esteja impressionado com os formulários do react Hook e, sim, exploraremos muito isso E está sendo comumente usado. Então, você também verá isso em muitos projetos. 5. Insights em tempo real: monitorando valores de formulário com o formulário de gancho do React: Oi, aí. Então, agora é hora de começarmos a falar sobre observar valores com formas de hook de reação. Agora, o que significa observar valores com formulários de gancho de reação? Portanto, haverá cenários em que você deseja acompanhar o valor que o usuário está fornecendo como entrada enquanto digita, certo? E você quer que seja, talvez queira que seja um pouco em tempo real, certo? Então é aqui que o relógio entra em cena. Então, o que é relógio? O relógio é uma função, como você pode ver no exemplo aqui, ok? Ele nos é fornecido pelo formulário react Hook e, usando isso, você pode observar qualquer valor, certo? Agora, sempre que você cadastra um campo, ok, você dá um nome a ele, certo? Então, ao se registrar, você diz registrar este campo, e esse é o nome do campo com o qual eu quero registrá-lo Está bem? Então, aqui, neste exemplo no site, você pode ver que o campo de entrada está registrado como nome de exemplo, certo? Então, o que você faz é importar a função de relógio aqui e depois dizer exemplo de relógio. Agora, sempre que você digitar qualquer coisa no registro aqui nesta entrada de registro, isso será acionado e o relógio terá o valor mais recente de tudo o que você está fazendo. Então, basicamente, é ficar de olho no que está acontecendo com essa entrada e qual valor está chegando. Vamos experimentar isso na prática para entender melhor. Então, vou mudar para o nosso aplicativo. Temos esse aplicativo simples em que estamos fazendo uso de formulários de reação. Alguns campos que estamos usando Entrada, nome e e-mail de entrada. Está bem? Agora, o nome está registrado com esse nome aqui, e o e-mail é registrado com o nome e-mail. Tudo bem? Agora, como observamos o valor? Então, a primeira coisa, o primeiro passo é inserir o relógio ou adicionar o relógio aqui, certo? E então aqui, o que podemos fazer é dizer relógio e aqui, eu posso dizer nome, algo assim. Eu quero ver o nome. Posso atribuir o valor aqui a uma variável ou deixar que eu registre o valor. Vamos ver o que acontece. Está bem? Então eu vou dizer Console. Opa, o log de pontos do console aqui e algo assim Ok. Deixe-me economizar. Você pode ver indefinido chegando. Ok. Agora, como um iPane, você pode ver o relógio sendo acionado Você pode ver, certo? Assista sendo acionado. O que quer que eu esteja digitando , você pode ver, como a saída aqui no console Isso é relógio para você, certo? Então, isso é relógio. Agora você tem mais um campo aqui, que é e-mail, certo? Agora, mesmo que o e-mail seja digitado, ok? Estou digitando um e-mail aqui. Ok. Portanto, não há nenhum relógio para e-mails por aqui, certo? Então, talvez você queira adicionar um relógio para e-mail também, e você pode fazer isso usando a mesma sintaxe, certo? Agora, em vez de registrar o valor do nome dessa forma , o que eu recomendaria é que você use o efeito de uso , use o gancho de efeito Então, o que eu faria normalmente é comentar isso. Ok. Deixe-me comentar isso. Eu diria que const assistiu o nome aqui, ok. E vou atribuir isso ao relógio e vou dizer o nome. Ok. Então, queremos fazer uso do efeito de uso. Eu vou dizer const, assisti. Envie um e-mail aqui e eu direi que assista ao e-mail. Então, eu estou observando os dois campos agora. Eu quero fazer isso. O que vou fazer é usar o efeito de uso. Agora, há uma razão pela qual estou usando o efeito de uso, porque quero manter o registro do valor dos nomes separado da minha lógica de renderização, aqui mesmo E usar o efeito de uso é uma boa prática para todos esses tipos de efeitos colaterais. Vou fazer uso do efeito de uso. Isso é uma sintaxe Eu tenho a função A arrow aqui, como esta, e eu tenho uma dependência E assim O Essa é uma sintaxe. Ok. O que faremos é aqui, dentro dessa lógica específica, direi log aqui, log do console, e direi valor do nome, nome e direi nome assistido, algo assim. Ok. E eu vou me livrar disso e aqui vou dizer o nome assistido. Portanto, sempre que o nome do relógio muda, esse gancho de efeito de uso é executado e imprime o valor do nome do relógio. Você pode ter mais um gancho como esse, adicione-o aqui. Está bem? E isso pode estar vinculado ao e-mail. E-mail. Ok. Então você pode dizer e-mail assistido, e-mail assistido, algo assim. Agora, vou atualizar, você pode dizer nome como você pode dizer eu amo, reaja Você vê que o nome está sendo impresso aqui. E-mail, você pode dizer e-mail em t example.com. Assim, você pode ver como está observando os valores e, se enviar, verá os dados sendo impressos. Agora, a questão é o que está acontecendo? Ok. Então, a questão , na verdade, é o que está acontecendo e por que você gostaria de usar o relógio. Quais são os casos de uso reais? Está bem? A primeira coisa, quando você está registrando o campo com os formulários do react hook, na verdade você o registra usando um nome, certo O nome aqui é nome e aqui, nome é e-mail. Está bem? Portanto, o formulário react hook identifica esse campo como nome e e-mail Agora, quando quiser observar os valores, você pode importar isso ou obter essa função da forma do reator e pode observá-la desta forma Agora, qualquer tipo de alteração no campo acionará essa atualização aqui, e isso é totalmente em tempo real. Está bem? Agora, se você quiser exibir esses campos, recomendo usar o Effecto aqui Porque isso separa a impressão dos valores da lógica de renderização, ok Agora, por que você quer fazer uso disso? Está bem? Então, a primeira coisa é a renderização condicional Assim, você pode assistir à renderização condicional de partes do seu formulário com base nos valores inseridos pelo usuário Está bem? Por exemplo, mostrar ou ocultar campos adicionais com base na seleção e. Está bem? Então, esse tipo de coisa, se houver diferentes tipos de campos aqui. Então, aqui estamos recebendo informações. Se você selecionou aqui ou em um menu suspenso ou em um botão de rádio. Depois, você pode observar o valor do que está acontecendo. E dependendo do que o usuário está selecionando ao inserir, tudo bem, você pode renderizar condicionalmente o formulário E isso é em tempo real mesmo antes de os dados serem enviados. Certo? Portanto, esse é um caso de uso. Validação ao vivo, talvez você queira fazer a validação ao vivo aqui enquanto o usuário está digitando o nome, ok? E se ele digitar ou tentar digitar um número, talvez você queira mostrar imediatamente uma mensagem de erro informando que, ei, o número não é permitido. Por exemplo, o nome não pode ser numérico. Então, todos esses tipos de validações ao vivo que você pode fazer ou mostrar dicas à medida que o usuário digita Então, se o usuário estiver digitando um título, digamos que título seja um campo E se você digitar um título muito longo, pode dar uma dica de que, ei, isso tem mais de dez caracteres, ok, não é recomendado, algo assim, Não é um erro, mas uma sugestão para um usuário ou uma dica de como você pode melhorar o título em seu formulário, por exemplo, certo? Formas complexas. Portanto, se você tiver algum tipo de formulário complexo , o watch pode ser usado para formulários de várias etapas para monitorar e validar os dados em cada etapa antes de continuar e antes mesmo de o formulário Então, esses são alguns dos casos de uso direto do relógio, ok? E eu acredito que você pode imaginar o quão útil isso é, certo? E é muito útil porque é bastante eficiente em tempo real e é muito fácil de usar com o mínimo de código. Nós literalmente escrevemos muito menos código, ok. Esse código serve literalmente para imprimir os valores, ok? Isso não é necessário se você não quiser imprimir, mas é literalmente o que é. Ok, você acabou de comprar um relógio e está usando a função de relógio aqui, certo? Espero que isso seja útil. E aqui com o US Effect, esses dois ganchos de efeito dos EUA são separados porque são acionados na mudança do nome do relógio e são acionados na alteração do e-mail do relógio. Tudo bem Então, espero que isso seja útil e espero que você tenha conseguido acompanhar. 6. Experiência do usuário perfeita: adicionando validações no formato de gancho do React: Então, agora é hora de começarmos a falar sobre validações com o formulário react hook Agora, como a validação funciona? Então, as validações funcionam de uma forma muito simples com muito menos código clichê, ok E você pode especificar regras de validação ao definir os campos. Por exemplo, aqui na minha tela, estou na página Get Started do formulário react Hook, e aqui você vê este exemplo. Ok, esse é o primeiro exemplo que você vê. Isso inclui uma validação básica. Você pode ver. É o que diz: inclua a validação com necessárias ou quaisquer outras regras de validação HTML padrão. E você pode ver como isso inclui a validação. Ele está registrando o campo aqui primeiro. Está bem? E então está dizendo que é verdade obrigatória. Está bem? Agora, o que isso faz é registrar esse campo e também informar ao React Hook form que, ei, esse campo requer um valor Portanto, o usuário não pode ignorar esse campo ou enviar o formulário sem passar um valor para esse Ok. Agora, se o campo não estiver preenchido, ou, tipo, qualquer valor não for encontrado aqui, e se houver um erro de validação, o que acontece é que você obtém o objeto de erro, você tem acesso ao objeto de erro, como você pode ver aqui. Está bem? Agora, esse objeto de erro faz parte do formulário use Hook e é um recurso poderoso usado para gerenciar e exibir os erros de validação dos campos do formulário. Está bem? Então esse objeto vai acompanhar qualquer erro de validação que ocorra quando o usuário preenche o formulário, ok? E cada campo do formulário terá sua própria entrada no objeto de erros, facilitando a identificação qual campo tem um problema e qual é esse problema. Ok. Agora, como isso funciona? Então, quando o usuário envia o formulário. Então, aqui eu registrei a validação como verdadeira. Ok, eu preciso ser verdadeiro, e eu tenho os erros aqui, ok? Agora, quando o usuário envia o formulário, o formulário react to verifica os valores de entrada em relação às regras de validação que você disse Então essa é uma regra de validação que eu defini aqui neste exemplo, ok? Agora, neste exemplo, exigimos que esse campo não esteja vazio e o usuário envie um campo vazio Então, o erro de validação é acionado e o objeto de erro aqui é atualizado, ok? E a mensagem de erro de validação está sendo adicionada aqui. Está bem? E isso está sendo exibido aqui. Você pode ver? Portanto, é necessário um exemplo de pontos de erros. Portanto, se isso tiver algum valor , exiba essa mensagem de erro. Você pode ver como ele está sendo exibido. Está bem? Então é assim que você pode usar as validações aqui. Está bem? Então, deixe-me dar uma ideia geral aqui. Está bem? Agora, vou mudar para nossa base de código. Ok. E aqui temos um formulário muito simples. Estamos registrando dois campos aqui. Ok. E esses dois campos, o que eles estão fazendo é basicamente campos de entrada, como nome e e-mail aqui. Está bem? Agora, o que faríamos é que primeiro eu viria aqui. Ao cadastrar o e-mail, desculpe, não o e-mail, vou registrar o nome aqui Ao fazer o registro, conforme a sintaxe aqui, você pode ver a sintaxe Ao se cadastrar, você passa mais um parâmetro com as regras de validação, certo? Então, vou simplesmente copiar isso. Ok. Você pode copiar isso aqui. Você vem aqui e dentro disso, você pode colá-lo. Está bem? Então, o obrigatório é verdadeiro aqui. Está bem? Agora, uma vez que isso seja verdade, você precisa acessar o objeto de erro, certo? Então você pode dizer estado do formulário aqui, estado do formulário, esfriar, e você terá erros, algo assim. Está bem? Então isso é algo que temos agora, certo. E agora o que você pode fazer é excluir o rótulo, ok, você pode ter erros sendo exibidos. Erros ensinados, você pode dizer o nome, ok. Então, nomeie porque o que é um nome de campo? O nome do campo é nome. Está bem? Então você pode dizer o nome do ponto de erro, e eu exibirei a mensagem aqui. Está bem? Então eu posso dizer P, e posso dizer que o nome é obrigatório, algo assim, ok? Vou guardar isso. Vou clicar em atualizar. Está bem? Se você enviar, verá que o nome é obrigatório, certo? O que fizemos para isso? Acabamos de adicionar uma propriedade acabamos de acessar o objeto de erro e estamos exibindo condicionalmente a mensagem de erro É isso mesmo. É isso mesmo. É muito simples e cria um código padronizado. Isso reduz o código padrão, ok? Então você não precisa escrever muito código clichê Você só precisa dizer o que precisa ser feito e todo o resto está sendo resolvido. Está bem? Agora, neste exemplo, como funcionou é que ao se cadastrar, dissemos, esse é um campo que estamos registrando com o nome do nome, Então o que aconteceu é que os erros estão registrados nesse nome aqui, o nome do campo. Portanto, o nome do campo é nome, aqui o nome do campo é e-mail. Ok. Então, com base nisso, os erros estão sendo registrados aqui, ok? E eles estão sendo exibidos condicionalmente com a ajuda da lógica e operam aqui Está bem? Agora, é assim que funciona, ok? Agora, aqui, na verdade, estamos dizendo que é necessário. Mas o que você pode fazer é exigir que a mensagem de erro padrão esteja aqui, certo? O que você pode fazer é, digamos, erro, nome do ponto, mensagem do ponto. Vamos ver qual é a mensagem que vamos ver. Então você pode ver que não vemos nenhum. Ok, eu preciso realmente embrulhar isso. Assim. Está bem? Então isso não existe, ok? Agora, o que podemos fazer está aqui, em vez de dizer: Ok, não é erro. São erros. Me desculpe por isso. Ok. Então, deixe-me atualizar. Se eu enviar, tudo bem? Não há nenhuma mensagem de erro que você vê. Está bem? Agora, você pode definir uma mensagem de erro personalizada aqui quando o registro for necessário Então você pode dizer que o nome é obrigatório, ok? E você pode salvar isso. Em vez de verdadeiro, você está transmitindo a mensagem de erro. E se você enviar isso, verá que a mensagem de erro personalizada será exibida, certo? Então é assim que você também pode fazer as coisas. Esse também é um exemplo em que, em vez de passar true, você passa a própria mensagem de erro e exibe as mensagens de erro dessa forma. Tudo bem Então, essa é uma maneira de fazer as coisas. Agora, além do necessário, haverá cenários em que você deseja regras adicionais ou deseja ter validações complexas Então, se você acessar o site do React Hook Fm, aqui no lado esquerdo, navegação, você deve aplicar a guia de validação. Clique aqui e aqui você verá uma lista de todas as regras de validação suportadas. Você pode ver o comprimento mínimo, comprimento máximo, tudo isso, ok, você pode contornar. Você pode ver o primeiro nome ou o tamanho máximo é 20. O comprimento mínimo que você pode definir dependendo de como você deseja. Ok. Então aqui você pode entrar e aqui você pode dizer obrigatório, ok? Uh, você pode dizer obrigatório, nome é obrigatório, e eu posso dizer comprimento mínimo, comprimento M, e eu posso dizer comprimento mínimo de dois, por exemplo, ok? E então aqui, vou mudar isso para o valor booleano Vou remover a mensagem e, aqui, vou deixar a mensagem correta, direi que o nome é obrigatório e deve ter pelo menos dois caracteres. Está bem? Algo parecido com isso. Vou guardar isso. E agora, se você atualizar, se puder dizer S, verá que o nome é obrigatório e deve ter pelo menos dois caracteres Se eu digitar S novamente, você verá o formulário sendo enviado. Ok. Então, sim, é assim que as regras de validação estão funcionando. E sem isso, também, se você não colocar nenhum tipo de nome aqui, você verá essa validação sendo acionada, certo? Então isso está funcionando perfeitamente bem, ok? Você também pode fazer isso por e-mail, ok? Você pode dizer que o obrigatório é verdadeiro aqui. Ok. Obrigatório é verdade, algo assim. Ok. E, opa, então isso tem que ser um preço baixo Algo assim, ok? E aqui, você pode dizer que, em vez de erros no nome do ponto, você terá aqui. Erros pontuam e-mails, algo assim. Está bem? Portanto, o e-mail é necessário, você pode dizer. Tudo bem? O e-mail é obrigatório, e você pode se livrar dele e salvá-lo. E agora, o e-mail também é necessário. Você pode ver que o nome é obrigatório, o e-mail é obrigatório. Está bem? Você também pode adicionar estilos CSS , se desejar, tudo bem Mas é assim que vai funcionar. E você tem coisas adicionais, como correspondência de padrões. Ok, você pode fazer uma combinação de padrões. Você pode ver aqui correspondência de padrões em ação, especificar o padrão que deseja fazer, e isso pode ser muito útil para e-mails. Ok. Portanto, se você tiver um e-mail aqui ou padrão de e-mail com o qual deseja validá-lo, também poderá executá-lo Então, o que podemos fazer é por e-mail, podemos ter esse tipo de padrão. Ok, então eu vou vir aqui. Ok. Solicitei um e-mail aqui. Ok. Obrigatório, eu especifiquei. Eu vou dizer padrão, algo assim, eu vou ter isso e vou especificar esse padrão. Vou montar esse padrão. Portanto, esse é um padrão que existe para validação de e-mail. Ok, eu adicionei esse padrão. Você pode pesquisar normalmente no Google e obter esse tipo de padrão, ok, ou vou compartilhar esse código com todos vocês para isso E se você salvar isso, ok, deixe-me atualizar. Se eu enviar, é necessário enviar um e-mail. Eu digito isso, eu digito isso. Ainda assim, o e-mail é obrigatório. Você pode ver que o e-mail não é válido. Então, se eu digitar isso, ok, e-mail ainda não é válido. Eu posso dizer.com, e então provavelmente deve funcionar. Você pode ver que a mensagem de erro desapareceu. Portanto, esse e-mail tem que ser válido, só então funcionará. Tudo bem Então, esse é um padrão Javascript para validar e-mails, e eu procuro por isso e tenho isso aqui Então, uma coisa que eu quero destacar para o nome aqui, você vê esta mensagem completa que nome não é nome é obrigatório, e também deve ter dois caracteres, ok? Mas aqui, eu só quero destacar a mensagem de que ela deve ter dois caracteres. E se estiver vazio, quero destacar como se o nome fosse obrigatório. Ok. Portanto, dependendo do erro que o usuário está cometendo, quero destacar essa mensagem de erro. Então isso também é possível. Eu vou te mostrar como isso pode ser feito. Ok. Então, aqui, o que eu vou fazer é comentar isso aqui. Ok. Vou duplicar isso, ok? Porque eu não quero deletar esse. Eu quero que você tenha acesso a isso. Ok, agora aqui, eu tenho que me registrar. Ok. Agora, no cadastro, estou passando um obrigatório aqui, obrigatório assim. Ok. Obrigatório é verdadeiro. O comprimento mínimo é dois. Está bem? Agora, eu te disse que, em vez de obrigatório, o que você pode fazer é transmitir, você sabe que pode passar a mensagem aqui, ok? Espere um segundo. Estou recebendo um erro. Eu não sei por quê. 1 segundo. Opa, eu perdi as chaves de fechamento aqui Eu não copiei isso. Tudo bem Isso é absolutamente normal. Acontece. Você sabe, eu vou fechá-lo. Ok. Sim. Portanto, ao usar o obrigatório, você pode especificar a mensagem de erro. Então, vou voltar para esse método. Vou dizer nome. Opa. Eu direi que o nome é obrigatório, algo assim. Está bem? Agora, como você especifica isso para o comprimento? Está bem? Então, eu vou ter isso aqui. Vou me livrar dessa mensagem. Vou dizer mensagem de erro, tot, name dot, ok? Eu tenho isso agora. Está bem? Então não é erro, são erros. OK. Lembre-se de ter o nome correto do objeto aqui. OK. Agora, para isso, o que posso fazer é ter um par de valores-chave mencionado novamente aqui, em vez de dois para um comprimento mínimo aqui. Ok. Posso dizer que isso funcionará é o comprimento mínimo. Vou me livrar de dois aqui. Vou adicionar curly pass aqui. E eu vou dizer valor. Ok, há uma propriedade de valor, vou dizer 20. OK. E eu vou dizer uma mensagem aqui. Qual é a mensagem que você quer ter, ok? Quero que a mensagem, pois o nome deve ter pelo menos dois caracteres. Vou copiar esta mensagem. Eu direi que o nome deve ter pelo menos dois caracteres. Feito. Guarde isso. Agora atualize e digite um, vou dizer um em ate gmail.com Não quero ver nenhuma mensagem de erro por e-mail. Então a@gmail.com, se eu enviar, você verá que o nome deve ter pelo menos dois caracteres, certo? Se eu remover isso, o nome será obrigatório. O nome deve ter pelo menos dois caracteres. Se eu digitar completamente e enviar, deverá ter pelo menos dois caracteres. Opa, eu fiz isso 20. Me desculpe. Vou guardar isso de novo. Se eu enviar, você verá os dados sendo enviados. Mas se você reduzir isso, os nomes devem ter pelo menos dois caracteres. Se você remover isso, o nome será obrigatório. Você pode ver como isso é dinâmico. Essa é outra maneira de fazer as coisas, ok. Vou diminuir um pouco o zoom ou vou usar a tela cheia. Está bem? Você pode ver o nome e a mensagem. Deixe-me levar isso para a fila. Deixe-me trazer o fechamento aqui. Ok, você pode ver como isso está estruturado. Então você está se registrando aqui, registrando o nome. Você está dizendo obrigatório, nome é obrigatório. Está bem? Se necessário, esta é uma mensagem que você está recebendo, ok? Para um comprimento mínimo, você está dizendo que o valor é dois, mas eu também quero receber uma mensagem. Então você tem isso passado como um objeto, que é um par de valores-chave aqui, ok, você pode ver, e agora está pegando um objeto com várias regras de validação. O cadastro está na verdade tendo o primeiro parâmetro como nome do campo, ok? O segundo parâmetro é, na verdade, um objeto aqui. Esse é o objeto inteiro, eu. Então, dessa colibrase para essa colibrase. É o objeto inteiro que está sendo passado para o registro como segundo parâmetro. E dentro disso, há também esse tamanho mínimo, em que dizemos que o valor é dois e o nome deve ter pelo menos dois caracteres. Qualquer mensagem de erro recebida, ela está sendo exibida aqui. E você pode ver o quão dinâmico era, ok? Essas são todas regras padrão, pessoal, certo? Comprimento mínimo, comprimento máximo, tudo o que você vê aqui, comprimento mínimo, comprimento máximo, ok, mínimo máximo, padrão, você sabe, valide Portanto, isso é o máximo e o mínimo necessários. Tudo isso é padrão, certo? Por que você escreveria código para isso em seu aplicativo em todos os campos de cada componente. Então, se você estiver usando se estiver criando um aplicativo pesado do Farm, imagine o quão complicado será para você imagine o quão complicado será para Certo? E imagine usar formulários de gancho de reação em uma aplicação pesada de formulários. Imagine fazer isso, ok? Portanto, ele oferece toda a flexibilidade. Você pode validar as coisas dessa forma, ok? Você pode até mesmo validar as coisas dessa forma. Está bem? Eu não quero passar uma mensagem. Quero ter uma mensagem padrão para todas as regras de validação. Você pode fazer isso. Eu te mostrei como você pode fazer isso, certo? Então essa é a beleza das formas de React Hook. É realmente uma maneira incrível de gerenciar formulários no React. Tudo bem? Espero que você esteja gostando disso e espero que ache valioso todo o conhecimento que está adquirindo com esta palestra, ok? Então, o react Forms incorporou regras de validação, como comprimento mínimo , comprimento máximo, tudo o que vemos aqui, ok? Você também pode ter funções válidas personalizadas para uma lógica de validação complexa. Por exemplo, se você acha que precisa de algo além disso, você pode escrever suas próprias funções. OK. Mas isso é muito além disso, certo? Você pode fazer o gerenciamento de erros por meio do objeto de erro. Está bem? Você tem acesso ao objeto de erro e pode brincar com o objeto de erro. O desempenho, o react to form é otimizado para desempenho, especialmente com formulários maiores. Tudo bem. Então, espero que você ache isso útil e espero que seja uma informação valiosa para todos vocês. 7. Velocidade é importante: comparando o desempenho de formas básicas e do formulário de gancho do React: Então, vamos agora comparar o desempenho da forma normal ou da forma básica que não faz uso das formas de gancho de reação. Então, eu tenho o código para um formulário básico aqui, e não estamos fazendo uso de formulários de hook de reação aqui. Tudo bem. Então, uma coisa, eu esqueci de remover essa entrada Portanto, essa é a entrada para formulários de gancho de reação. Portanto, nesta forma específica, não estamos fazendo uso de formas de reação, como eu disse. É um formulário muito básico com e-mail, nome, e estamos usando on handle submit e on change event lesna aqui, e o valor está vinculado a esse estado aqui OK. E você tem esse enorme gancho de efeito para que possamos acompanhar quando o formulário é realmente renderizado ou quantas vezes ele é renderizado novamente, Portanto, não estou usando a matriz de dependência aqui e, como não estou usando a matriz de dependência, será acionada a cada nova renderização E eu tenho isso em handle change, que é garantir que o valor seja atualizado nos estados para cada alteração. E eu tenho esse identificador de envio para lidar com o envio. Agora, chegando à compilação aqui, se eu atualizar, você verá o formulário básico renderizado duas vezes, e isso é, claro, por causa do modo estrito Está bem? Então, está tudo bem. Vou ampliar um pouco. OK. Agora, vou digitar alguma coisa aqui, então vou dizer que, se você puder ver, toda vez que alguém digita , eu adoro reagir. Toda vez que eu digito, ele renderiza novamente o formulário. Então, ele é renderizado novamente 14 vezes enquanto eu digitava 14 caracteres Está bem? Se eu digitar o e-mail, ele será renderizado novamente. Você pode ver. E não é eficiente em termos de desempenho. Se eu enviar isso, ok, recebo um erro, mas deixe-me remover isso e deixar que eu envie. Você pode ver os dados enviados, mas depois de muita renderização Portanto, isso não é otimizado para desempenho. Isso não é bom. Há muita renderização acontecendo, o que pode ser evitado. Está bem? Agora, neste mesmo exemplo, o que podemos fazer é usar formulários de gancho de reação e o formulário de gancho de reação pode gerenciar isso uma maneira muito eficaz e eficiente com o mínimo de código. Então, aqui você está escrevendo muito código. Você pode ver quase 50 linhas de código, mas isso pode ser minimizado com formulários de hook de reação Agora, aqui, eu converti esse exemplo em forma de gancho de reação. Estou usando o formulário de gancho de reação aqui, você pode ver, e muito menos código. E aqui eu tenho dois campos, nome e e-mail. Estou registrando esses dois campos e tenho um gancho de efeito de uso sem uma matriz de dependência novamente para imprimir a forma de gancho renderizada Eu também tenho uma função de envio, que está sendo passada desta forma aqui. Vamos ver como a renderização funciona aqui. Se eu vier aqui, você pode ver a forma do gancho de reação renderizada duas vezes Claro, isso se deve ao modo estrito. Agora, se eu digitar, adoro reagir. OK. Você pode ver que não há nenhuma nova renderização acontecendo Está bem? Você também pode digitar e-mail, mail.com e enviar os dados Você pode ver que não houve nenhuma nova renderização. Então, isso é muito mais eficiente. O formulário React ok minimiza a renderização aqui. Ele não renderiza novamente o componente, e essa é a vantagem de usar formas de gancho de reação. Agora, essa diferença de renderização é muito importante. Se você estiver criando formulários grandes e complexos, formulários complexos de integração ou formulários complexos em seu aplicativo e seu aplicativo estiver cheio de formulários Então, isso importaria muito a longo prazo, pois se você estiver usando o formulário básico, em primeiro lugar, terá muito código padronizado primeiro lugar, terá muito código padronizado Seria difícil de gerenciar. Há muita renderização e o desempenho não é otimizado, certo? Mas com os formulários de hook de reação, você pode ver menos código. Ok, você tem que escrever menos código. Muito código padronizado é reduzido, e o formulário react Hook oferece benefícios de desempenho ao reduzir renderizações desnecessárias, tornando-o mais eficiente para lidar com formulários, especialmente no caso de uso em que você tem Tudo bem? Então, espero que tenha sido útil, essa demonstração, e espero que tenha lhe dado uma boa clareza sobre a diferença e a importância das formas básicas versus formas de reação. E espero que você adquira conhecimento sobre como as formas de reação são importantes e agregam valor. 8. Redefinir e atualizar: dominando o gerenciamento de estado de formulários: Então, agora é hora de começarmos a falar sobre a funcionalidade de redefinição e como você pode adicionar a funcionalidade de redefinição usando formulários react Hook? Agora, a redefinição é uma das funcionalidades que você talvez queira oferecer aqui. Então, aqui neste formulário específico, talvez você queira ter um botão de reset. Além disso, depois que os dados forem enviados, talvez você queira redefinir o formulário e limpar todos os valores que o usuário possa começar com um novo envio, se desejar. Tudo bem. Então, como você faria isso? Portanto, com o formulário react Hook, é tão fácil quanto chamar uma função. Então, os formulários React Hook oferecem essa função de redefinição que você pode adicionar aqui, ok? E você pode fazer uso disso. Tudo bem. Então, o que vou fazer é, ao enviar, estamos registrando os dados. Está bem? Portanto, eu tenho um formulário muito simples, cujo nome é registrado no formulário react took com essa validação. Você tem um e-mail aqui, que está fazendo essas validações aqui, e então você também tem erros que está exibindo, e você tem um botão que é enviar E você está lidando com o envio dessa forma, você está apenas registrando os dados. Está bem? Agora, ao enviar, eu também gostaria que os dados fossem redefinidos, porque o que acontece agora é se eu enviar, se eu e se eu disser A em chmail.com, Ok, então eu posso dizer e vou dizer ABC. Isso não é redefinir o formulário aqui, realmente, certo? Então, o que você pode fazer aqui é redefinir o formulário. Está bem? Então, o que eu faria é adicionar um par de prensas encaracoladas antes de Está bem? Isso está feito. E então aqui eu chamaria essa função de reinicialização. Eu vou dizer reiniciar. E eu vou dizer, vou chamá-lo assim. OK. E isso redefiniria o formulário após o envio. Então, o que você pode fazer aqui é, ok, eu posso dizer teste, e eu posso dizer teste em mail.com Se eu disser enviar, ele limpa todo o valor e redefine o Você pode ver que o envio foi concluído e o valor foi apagado Está bem? Além disso, você também pode adicionar um botão. Então, aqui, o botão está sendo adicionado, que é usado para enviar o formulário aqui. OK. O que você pode fazer aqui é criar um botão de reset. Você pode dizer reset aqui. O tipo é um botão, então vou selecionar isso. Eu vou dizer botão. E você pode dizer ao clicar aqui, clicar, você pode adicionar a função de seta e chamar o reset. Então você pode dizer reset e você pode chamar isso aqui. Ok, algo assim. Este é um botão de reset. Agora, o que aconteceria é se você digitar qualquer coisa, ok. Opa, desculpe. Então, se você digitar qualquer coisa, você pode reiniciar, certo? Se você digitar qualquer coisa aqui, qualquer coisa aqui, quiser redefinir o formulário inteiro, você tem essa parte de redefinição. Está bem? Portanto, esse é um benefício do reset aqui. É tão simples quanto fazer uma chamada de função aqui e limpar todos os valores Você pode fazer a chamada de função da sua função Jascript aqui que você está definindo, ok na função de envio, ou você pode até mesmo fazer isso usando isso, no ClickList Tudo bem. Então, espero que isso seja útil e espero que você tenha obtido algumas informações com isso. 9. Feedback personalizado: criando validações personalizadas no React Forms: Então, agora, eu tenho um formulário, que está usando formulários de react hook, e eu tenho alguns campos no formulário, como este é um formulário. Eu tenho nome e também tenho e-mail aqui. Está bem? Agora, a validação que estou usando aqui é bem simples. Por exemplo, eu preciso que o nome seja obrigatório, e o requisito de comprimento mínimo é de dois. Aqui, o e-mail deve ser obrigatório, e esse é um padrão que eu quero combinar para descobrir se o e-mail é válido ou não. Está bem? Então essa é uma validação que eu já tenho, ok? Agora, essas validações que estou tendo são validações comuns e padrão, certo? Ao criar formulários, haverá cenários que você deseja ter algum tipo de lógica de validação personalizada nos campos do formulário que seja personalizada para o seu aplicativo. Está bem? Agora, nesse caso específico, há uma opção chamada validar que permite adicionar essas verificações personalizadas aos seus formulários Agora, por exemplo, deixe-me dar um exemplo aqui. Digamos que eu queira que usuários com o nome Edmin apenas enviem este formulário Agora, essa é uma verificação personalizada específica do meu aplicativo e não é algo comum ou genérico, certo? Então, como você adicionaria isso aqui? Então é aqui que as opções de validação entram em cena. OK. Portanto, a opção validate assume uma função que retorna true e retorna uma mensagem de erro se a validação falhar. Está bem? Então, verdadeiro é o retorno se a validação for aprovada. Tudo bem. Agora, vamos ver isso em ação. Então, digamos que, neste formulário específico, eu usarei o mesmo exemplo de um salário para verificar se o usuário ou o usuário tem o nome de Edmin. Agora, como você pode usar a opção validar aqui é entrar, dizer aqui e dizer validar, validar como a opção Você pode ter um par de valores-chave e mencionar o nome da função aqui. Está bem? Então, qual é o nome da função? Está bem? Então, podemos criar uma função aqui. Ok, posso dizer const validate name aqui, e esse ganho tem valor como parâmetro Você pode ter algo assim, e então você pode dizer se é valor. Está bem? Assim, você pode dizer se o valor é igual a o admin. Ok, ou se você disser se o valor não é igual a Admin aqui. OK. Opa, o valor I não é igual ao Admin, então o que você faz é retornar Somente administradores são permitidos. Somente administradores são permitidos, algo assim. OK. Dependendo da sua necessidade, você pode enviar o tipo de mensagem ou criar as mensagens dependendo do requisito que você tem, mas vou salvar isso para que eu crie isso agora. Agora, você vem aqui e diz nome válido, algo assim. Guarde isso. Você vem aqui e nos deixa refrescar. Se você vier aqui e digitar AD, eu não estou digitando Admin Ok, e eu tenho um G mail válido. OK. E-mail válido aqui. Se eu enviar, você verá que somente administradores são permitidos. OK. Se eu disser administrador aqui, administrador. Opa, administrador, e se eu disser enviar, você verá que o erro desapareceu e poderá enviar o formulário. Tudo bem? Você também pode ter a lógica dizer que o administrador não é permitido, ok? Então você precisa reverter a condição. O administrador não tem permissão para entrar aqui. Está bem? E você pode reverter a condição, algo assim. Se for igual a Admin , não permita Admin. Está bem? Então, se eu disser administrador aqui, tudo bem. Tudo bem. Administrador não é permitido. Você pode ver. Tudo bem. Então é assim que funciona, certo. E espero que você tenha uma ideia de como isso funciona. Você pode até mesmo encurtar isso como se não precisasse dessa função separada aqui para estar lá OK. Então, em vez disso, em vez de escrever uma função separada, o que eu vou fazer é chamar essa função aqui, ok, eu posso dizer aqui, ok, eu posso escrever uma função aqui em si de uma forma abreviada Eu tenho esse valor, ok. Vou usar a flecha. Eu vou dizer que se o valor não for igual ao Admin aqui, ok? Então, nesse caso, você escreve que Admin não é permitido. Ok, algo parecido com isso. Então, isso funcionará da mesma maneira. Tudo bem. Você pode ver que o administrador não é permitido, certo. Então, isso voltará a ser verdade. Caso contrário, ele retornará essa mensagem. Está bem? Então é assim que essa coisa funciona aqui e você pode se livrar dessa função se precisar. Está bem? Vou apenas comentar isso. Se você vier aqui, tudo bem? Você pode dizer administrador aqui e tentar enviar. Você pode ver que o administrador não é permitido. Tudo bem. E sim, isso está funcionando perfeitamente bem. Tudo bem? Então isso funciona, ok? E aqui, eu te dei um exemplo. Está bem? Então aqui o que está acontecendo é que estamos passando a mensagem, ok? Agora, se a mensagem de pontos de erro não for encontrada, você está mostrando essa mensagem personalizada. Está bem? O que você pode fazer é ter várias regras de validação nessa única opção. Por exemplo, aqui você está verificando se o nome de usuário é válido ou se o nome de usuário é admin ou não, ou se o nome é válido ou não. Desculpe, o nome não é válido ou não. Você está verificando se o nome é admin ou não, certo? Se o nome não for admin admin, com base nisso, você está exibindo essa mensagem, certo? Então, o que você pode fazer é ter mais aqui, ok, não um. Está bem? Então, o que eu posso fazer é adicionar que isso pode ser um tipo de objeto aqui que você pode adicionar, tudo bem, e algo assim. OK. E você tem aqui. Então, isso pode ser nomeado, ok? Você pode dizer que não é administrador. Ok. Assim. E isso é um cheque. OK. Digamos que eu queira adicionar mais um cheque, certo? Eu quero adicionar mais um cheque, não é o número, ok? Portanto, não quero que os usuários insiram o número no campo. Então, o que eu posso fazer é dizer valor novamente. O que é um cheque? Eu vou fazer assim. Eu vou dizer que é N N, é N aqui. Está bem? E eu vou repassar o valor. OK. E eu vou ter essa mensagem aqui. O nome não pode ser um número. Está bem? E eu vou terminar isso com uma vírgula se eu precisar Está bem? Então você pode terminar com a vírgula ou não é necessário, na verdade, esse é o último Agora, também quero dizer que espero que você clareza sobre essa forma abreviada de fazer as coisas Então, estamos fazendo uso da expressão condicional aqui, a condicional ou, e você pode ver aqui se o valor não é igual a admin, ok, verifica se o valor não é igual a admin. Está bem? E se a condição for verdadeira, a expressão retornará verdadeira. Portanto, essa expressão retornaria verdadeira. E se for falso, isso será devolvido. OK. De forma semelhante, isso verifica se isso é verdade, então isso seria verdadeiro seria retornado e, se falso, seria retornado. Então, aqui, você pode testar isso aqui inserindo números aqui. Você pode ver que o nome é obrigatório e deve ter pelo menos dois caracteres, ok? Espere um minuto. Na verdade, posso digitar agora e enviar. OK. Está me dando um erro aqui, ok? E deixe-me verificar qual é o erro para que o erro seja simples. Eu cometi um erro de digitação aqui. O último N é maiúsculo aqui, alguma coisa. Opa. Desculpe. Então, o último N é maiúsculas, algo assim, ok? Salve isso e você vem aqui para se refrescar. Ok, e digite três, quatro, você pode ver, o nome não pode ser um número. Está bem? Você pode adicionar mais um, ok? Você pode adicionar mais um, se desejar. Você pode adicionar quantas quiser. Está bem? Todas essas são regras de validação personalizadas. Se a regra for complexa e não se encaixar aqui, você pode adicionar uma função separada que verifica isso, algo assim, e você pode vincular essa função aqui OK. Então, tudo isso é possível aqui, ok. Mas, basicamente, quero destacar que essa é uma maneira de adicionar lógica de validação personalizada, ok? E a opção de validação permite validações personalizadas detalhadas, além de simples verificações E esse recurso é útil em cenários em que as entradas precisam de formatos ou condições específicos que não são cobertos por coisas genéricas, como comprimento máximo exigido que existe por padrão nos formulários de hook de reação Está bem? Portanto, além dos formulários padrão, react hook forms também oferece muita flexibilidade na criação sua própria lógica personalizada muita flexibilidade na criação de sua própria lógica personalizada, de uma forma mais limpa e organizada Tudo bem. Espero que isso seja útil e espero que você possa acompanhar. 10. Além do básico: implementando validações personalizadas sofisticadas: Então, falaremos um pouco mais sobre a opção de validação e aprenderemos como você pode adicionar validações personalizadas que são um pouco mais complexas em seu aplicativo, certo Até agora, o que vimos é que com a opção de validação, você pode realmente adicionar esse tipo de validação, ok Você pode ter validações personalizadas para seu aplicativo ou domínio, certo? Então, aqui estamos verificando se o usuário é administrador ou não, e aqui estamos verificando se o usuário está inserindo o número ou não no nome. Ambos não devem ser permitidos e devem ser tratados adequadamente, dependendo da condição que você definir, certo Então, temos essas duas verificações de condição aqui. Haverá cenários nos quais talvez você queira adicionar mais Assim, você pode adicionar mais coisas aqui adicionando vírgula no final e pode continuar adicionando mais entradas aqui na opção de validação Agora, digamos que você tenha um cenário em que deseja realizar a validação assíncrona Agora, o que essa validação assíncrona significa? Então, a validação assíncrona significa que você quer fazer uma verificação com o back-end Talvez você tenha um servidor de back-end, queira verificar algo no back-end e depois mostrar a mensagem de erro de validação ao usuário. Como você faria isso? Então, isso é possível com a ajuda da própria opção de validação, como a própria opção de validação Está bem? Então, digamos que aqui no cenário, temos nome e e-mail. Digamos que eu queira verificar nome, digamos que não seja nome, digamos que seja nome de usuário e eu queira verificar e validar isso com o back-end, independentemente de o nome de usuário existir ou não Ok. Então, como eu faria isso? Está bem? Então, o que você pode fazer é ter uma função de verificação ou assíncrona Verificação assíncrona é o que eu diria, ok? E usando isso, você pode realizar a validação assíncrona Então, deixe-me fazer isso. Ok. Então, o que eu faria seria aqui, eu viria aqui. Ok, eu diria que a vírgula, eu diria que validar e validar já foi adicionada, então eu diria que verifique Ok. E aqui, eu diria valor ou direi valor aqui. Ok. E eu teria a lógica D. Está bem? Agora, a lógica virá assim por aqui. Ok. Mas isso agora é fazer uma verificação com o back-end, certo? Então, teremos que marcar isso como desde então. Ok. Agora deixe-me mostrar como você pode fazer isso. Então, digamos que eu tenha const. Ok, eu tenho esse valor de Pollan existente, que estou obtendo ao verificar se nome do usuário funciona aqui. Está bem? Verifique se o nome de usuário está recebendo valor como entrada. Agora, o que é check if username? Está bem? Então, deixe-me adicionar o nome de usuário check iff aqui. Está bem? Agora, aqui, eu posso dizer função. Verifique se eu uso um nome. Ok. Qual é o parâmetro? Ele aceita? Ele aceita o parâmetro , então eu não quero passar parâmetros agora. Ok, eu vou definir isso usando a função de seta, então eu vou dizer que é igual a, ok. E espere um minuto. Eu errei a sintaxe. Então, eu vou dizer uma sincronização. Verifique se desculpe, não é uma pia. Eu errei a sintaxe. Deixe-me deletar isso. Ok. Então, isso será const. Verifique se usa um nome. Ok. E vou chamar isso de existir porque verificar se o nome de usuário existe soa melhor. Está bem? Então, vou substituir isso aqui, verificar se o nome de usuário existe. Ok. E aqui, vou marcar isso como função assíncrona, ok E eu vou passar o nome de usuário, assim. Está bem? Porque o valor está sendo passado aqui, então isso não é nada além do nome de usuário. E eu tenho o cheque aqui definido, ok? Agora, o que posso fazer aqui é fazer uma verificação simulada no back-end Eu posso dizer que const existe. Ok. E aqui você pode ter uma ligação do EPI que você pode fazer, ok? Então aqui você pode ter o código para a chamada EPI, e isso pode retornar um resultado booleano, ok Ou você pode processá-lo e obter o valor booleano, certo? Então, depende totalmente de você. Mas o que eu posso fazer aqui é que você pode, na verdade , então o que vou fazer aqui é simular a verificação do back-end . Eu posso dizer espere. Ok, e eu posso dizer uma nova promessa aqui, ok? E eu vou dizer resolva aqui. Ok. Então, estou apenas criando uma promessa. Eu direi definir o tempo limite e direi resolver mil Estou fazendo um atraso de 1.000 milissegundos aqui, simulando um E eu vou dizer, volte. Ok, eu vou dizer return, e você pode retornar um valor booleano aqui Está bem? Agora, qual valor booleano você pode retornar Então, o que eu posso fazer é ter aqui uma lista estática. Ok, então eu vou ter uma lista estática de nomes de usuário existentes. Está bem? Essa é uma lista estática e é uma RA, eu vou dizer administrador, eu vou dizer usuário, um, dois, três, e eu posso dizer, você pode adicionar mais uma. Vou me acalmar, algo assim. Agora você pode dizer devolver, e eu posso verificar se existe. Está bem? E desculpe, posso devolver o que vou devolver, posso dizer nome de usuário existente. Ok, ponto incluído, vou dizer o nome do usuário aqui. Então, este é um nome de usuário que estou passando. Está bem? Então, o que isso está fazendo é eu tenho uma lista estática de nomes de usuário Claro, esse não será o caso no seu caso , porque você pode fazer uma chamada de API de back-end aqui, ok? Então, o que estou fazendo é ter uma lista inicial de nomes de usuário, ok, e estou verificando o nome de usuário, como se o nome de usuário que o usuário inseriu existisse no nome de usuário existente Se existir, estou retornando esse valor de verificação. Esse é um resultado booleano que estou retornando, ok? E antes de fazer essa verificação, estou simulando um atraso aqui de 1.000 milissegundos. Tudo bem Então, isso é como uma chamada de API simulada aqui, certo? E aqui, como é uma pia, vou esperar porque está retornando uma promessa aqui. E como isso é uma espera, isso se torna uma pia. Certo? Então, espero que isso esteja fazendo sentido agora quanto ao que está acontecendo aqui, ok? E aqui, posso dizer que return not equal to exist ou você pode dizer que o nome de usuário já está sendo usado. Está bem? Então, o nome de usuário já está sendo usado, algo assim. Tudo bem Então você tem esse tipo de mensagem sendo enviada. Guarde isso. Ok. Vamos ver como isso funciona. Está bem? Então, vou fazer uma atualização. Então, o nome de usuário que temos é John, um dos nomes de usuário, eu posso fazer John. Eu posso dizer enviar. Você pode ver depois de um tempo, você pode ver o nome de usuário já usado. Eu também poderia aumentar o atraso. Está bem? Isso é possível. Posso dizer John one and e no rate gmail.com. Portanto, como esse nome de usuário é exclusivo, ele funcionará. Ok, você pode ver que foi enviado. Ok. Então é assim que a validação assíncrona E isso não é apenas validação estática, mas se você quiser fazer qualquer tipo de verificação ou validação com o back-end, você pode absolutamente fazer isso, certo? E agora você pode imaginar o quão poderoso isso pode ser. Está bem? Então, se você está trabalhando em um projeto real, você tem EPIs em execução, você precisa validar algo chamando algum EPI, você pode absolutamente fazer isso Você pode até mesmo fazer validações dependentes, ok? Então, validações dependentes, como vou te dizer, digamos que você tenha um campo de senha e um campo de senha confirmada, certo? Agora, o que você gostaria fazer é quando um usuário digita a senha, verificá-la com o outro campo de senha e, se estiver incorreto, talvez queira acionar uma mensagem informando que a senha não corresponde. Talvez você queira fazer isso, certo? Então, esse poderia ser outro caso de uso aqui. Então, o que eu faria é aqui, eu tenho uma etiqueta. Esse é o segundo rótulo depois desse rótulo e depois dessa mensagem de erro aqui. Está bem? O que eu posso fazer aqui é adicionar um rótulo. Ok, eu posso dizer rótulo, algo assim. Ok. E eu posso dizer senha, assim, e aqui eu posso dizer a entrada aqui. Ok. E a entrada pode ser a senha do tipo. Ok, digite a senha, e aqui, eu diria, ok, aqui. Eu diria que se registre e registre isso. Está bem? E como você registraria isso? Então você registraria isso como senha. Então, vou manter uma senha pequena B aqui. Ok. E eu vou dizer que o necessário, tem que ser exigido. Está bem? Posso passar tudo isso, campo obrigatório e validação obrigatória, mas não vou fazer isso. Está bem? Vou manter as coisas simples. Está bem? Então isso está feito. Tudo bem Ou, se você quiser, vou obter a validação aqui. Ok. Então, sim, essa é a validação que vou adicionar aqui. Então, sim. É isso mesmo. Ok. E isso fecha o exigido aqui, registrado O registro está fechado. Ok, isso está fechado, registro está fechado, e então você tem um colchete encaracolado fechado. Está bem? E é isso. Estamos vendo um erro aqui. Qual é o motivo do erro? Deixe-me ver. Então, eu não preciso dessa opção validada, então vou me livrar dela Ok, vou manter as coisas simples. Ok. Isso é tudo que eu preciso, certo. Então, basicamente isso. Ok. E agora, o que posso fazer é duplicar esse campo Ok. Então, todo esse campo é duplicado, e você pode ter uma senha de confirmação aqui, certo? Isso é uma confirmação. Ok. E em vez de digitar senha, isso é digitar senha. Em vez da senha aqui, posso confirmar a senha. Ok, algo parecido com isso. Ok. E você tem um comprimento mínimo aqui. Ok, vou me livrar dessa vírgula. Ok, comprimento mínimo. Agora, comprimento mínimo após comprimento mínimo, o que você pode fazer aqui é adicionar uma opção validada, para que você possa dizer validar Agora, esse campo de senha deve corresponder à senha de confirmação deve corresponder à senha, sempre. Então você pode dizer valor, ok, seta. E você pode dizer que o valor é igual a watch e Oops. O relógio não é importado, então eu preciso importar, assistir, assistir, eu digo, uh , não está me permitindo assistir e vou dizer a senha. Então isso está observando a senha, e ela está retornando seu valor, ok? E se isso for verdade, tudo bem. Se não for, você envia uma mensagem informando que as senhas não coincidem, certo? Senhas, não coincidem, algo assim, certo? Isso está feito. Precisamos vigiar. Ok, então o relógio ainda não foi adicionado. Caso contrário, receberemos um erro. Então eu fiz isso e você pode vir aqui. Ok. O formulário não parece muito bom. O formulário não parece muito bom. Mas deixe-me adicionar algumas tags BR e alinhar isso em um único profissional Então, depois de cada etiqueta, adicionarei a tag BR. Tudo bem? Isso deve estar bem por enquanto, estamos aprendendo, certo? Então, sim, temos o formulário pronto. Ok. Você pode ver se eu enviar, você verá todas as validações acionadas, certo? Ok. E você pode dizer teste. Você pode dizer A, na taxa gmail.com. Senhas, você pode ver, um, dois, três, quatro, Ok, um, dois, três, quatro, cinco, seis. Ok, eu inseri seis. E aqui, vou inserir algum outro valor. Está bem? E se eu disser enviar, ok? Vamos ver o que acontece. O envio não acionou nada. Está bem? Isso é estranho Tudo bem O que está errado? Deixe-me ver. Portanto, a validação não está sendo acionada, talvez porque eu não tenha adicionado as mensagens de erro de validação Ok, eu deveria ter adicionado isso. Então, o que vou fazer é que aqui após o rótulo, você está mostrando as mensagens de erro, certo. Então, aqui depois do rótulo, eu adicionaria as mensagens de validação. Então, erros, classifique, confirme a senha. Ok. Esse é um nome de campo. Ok. Eu direi para confirmar a senha, algo assim. Ok. E aqui também, logo após o rótulo, adicionarei as mensagens de erro. Portanto, você deve ver a mensagem de erro agora que as senhas não coincidem. Você pode ver como funciona. Agora, se eu mudar isso para um, dois, três, quatro, cinco, tudo bem. Ok. Deixe-me ver. Cinco. Ok. Eu digitei um, dois, três, quatro, cinco, um, dois, três. Ok. Então, deixe-me tentar novamente, um, dois, três, quatro, cinco. Ok, aqui, um, dois, três, quatro, cinco. Eu me submeto. Ok, você pode ver a mensagem de erro de senha não está sendo acionada. Está bem? Então está funcionando bem, certo. E é assim que você pode comparar, observar ou criar validações que dependem de algum outro campo Então, aqui, a validação do campo de confirmação da senha depende do campo da senha, certo? Então, isso é conhecido como validações dependentes, é o que eu chamo, certo? Então, isso é sobre isso. E agora mais uma coisa que eu quero te mostrar. Então, agora o que está acontecendo é que se você enviar naquele momento, a validação é acionada, certo? Haverá cenários em que você desejará acionar a validação na alteração ou quando a coisa estiver sendo digitada, certo Quando o usuário está preenchendo o formulário. Portanto, deve ser em tempo real. Você pode fazer isso em tempo real com uma pequena mudança. Então, o que você pode fazer é vir aqui. E quando você está criando um formulário de instância de uso aqui, ok, aqui no formulário de uso, você pode adicionar uma predefinição de CO, ok e aqui você pode especificar modo e dizer sobre alteração em mudança Você pode ver no BL que havia algumas opções, ok? Algumas opções para desfocar na alteração no envio, eu diria que na alteração Vou guardar isso e agora ver a mágica, certo? Então aqui eu adicionei. Você pode ver que o nome é obrigatório e deve ter pelo menos dois caracteres. Você pode ver. Ok. Um preenchimento no nome, OK, a validação está feita R, na taxa gmail.com. Ok. Senha. Ok, um, dois, três, quatro, cinco. Ok, um, dois, três, quatro, cinco. Ok. Você pode ver. Seis. Ok. Assim, você pode ver como o formulário está funcionando em tempo real agora, e tudo isso por causa de uma única alteração. Eu adicionei esse par de valores-chave aqui como um objeto ao criar o formulário, certo? Então, espero que tenha havido um bom aprendizado aqui sobre gerenciamento de formulários com o formulário react hook, certo. Espero que isso tenha sido útil e que isso lhe dê a capacidade de criar seus próprios formulários uma forma muito robusta, com desempenho eficiente e muitos recursos, reduzindo muito código padronizado Então, esses são os formulários de react hook para você e essas são as validações personalizadas para você Espero que tenha sido muito útil. 11. Conclusão do curso: E isso nos leva ao fim dessa jornada transformadora mundo das formas de gancho de reação Nós nos aprofundamos em como o react hook form pode ser um divisor de águas no gerenciamento de formulários em aplicativos react Exploramos muitas coisas quando se trata de gerenciamento de formulários no react Aprendemos como você pode resolver problemas comuns e vimos o poder dos formulários de gancho de reação. Então, só para recapitular o que aprendemos, aprendemos como você pode observar os valores mudarem dinamicamente, implementar validações melhorar o desempenho de seus aplicativos de Que têm formas, é claro. E também comparamos formulários básicos com o formulário react hook para que você entenda como react Hook form pode ser um divisor Então, espero que este curso tenha dado a você uma perspectiva diferente do gerenciamento de formulários no mundo do react. Mas lembre-se, nossa exploração não termina aqui. O poder do react Hook forms está em sua flexibilidade e capacidade de se adaptar a uma ampla variedade de tarefas de manuseio de formulários. E eu encorajo você a continuar experimentando, explorando e ultrapassando os limites do que é possível com essa ferramenta em seus projetos Estou empolgado em ver como você usará os formulários do react hook em seu projeto, pois isso vai turbinar seu processo de gerenciamento de formulários E lembre-se, inovação e eficiência têm tudo a ver com adotar novas ferramentas e técnicas, e o formulário react Hook agora é uma parte vital do seu kit de ferramentas de reação Obrigado por fazer parte deste curso e obrigado por ser um grupo de alunos tão engajado Espero que este curso não tenha apenas equipado você com novas habilidades, mas também tenha inspirado você a pensar sobre o manuseio de formulários a partir de uma perspectiva completamente diferente. Com essa aula, você encontrará um projeto de classe que poderá ser concluído e enviado na seção de projetos. Feliz aprendizado, desejando a você tudo de bom.