{"id":3702,"date":"2022-06-03T08:00:00","date_gmt":"2022-06-03T11:00:00","guid":{"rendered":"https:\/\/coodesh.com\/blog\/?p=3702"},"modified":"2022-06-03T09:06:20","modified_gmt":"2022-06-03T12:06:20","slug":"saiba-como-adicionar-mascara-em-react-na-criacao-de-formularios","status":"publish","type":"post","link":"https:\/\/coodesh.com\/blog\/carreiras\/saiba-como-adicionar-mascara-em-react-na-criacao-de-formularios\/","title":{"rendered":"Saiba como adicionar m\u00e1scara em React na cria\u00e7\u00e3o de formul\u00e1rios"},"content":{"rendered":"\n

Quando estamos desenvolvendo um formul\u00e1rio, existem campos com uma formata\u00e7\u00e3o previamente conhecida, como do CEP, telefone, CPF, entre outros. Portanto, saber como usar m\u00e1scara em React auxilia no desenvolvimento dessas aplica\u00e7\u00f5es<\/strong>, al\u00e9m de melhorar a experi\u00eancia do usu\u00e1rio. <\/p>\n\n\n\n

Nesse sentido, saiba neste conte\u00fado como adicionar m\u00e1scara em React, acompanhando o passo a passo usado pela nossa equipe. <\/p>\n\n\n\n

O que s\u00e3o m\u00e1scaras?<\/h2>\n\n\n\n

As m\u00e1scaras em React <\/a>s\u00e3o um tipo de formata\u00e7\u00e3o no input para facilitar a valida\u00e7\u00e3o do campo e deix\u00e1-lo interativo ao usu\u00e1rio, evitando erros desnecess\u00e1rios. <\/p>\n\n\n\n

Portanto, as m\u00e1scaras n\u00e3o alteram como o dado ser\u00e1 tratado, logo, ela n\u00e3o funcionar\u00e1 como uma valida\u00e7\u00e3o.<\/p>\n\n\n\n

Exemplo CPF 01: 000.000.000-00 <\/strong><\/p>\n\n\n\n

Se o usu\u00e1rio preencher com n\u00fameros aleat\u00f3rios 123.456.789-00 ficaria com a formata\u00e7\u00e3o de CPF (xxx.<\/strong>xxx.<\/strong>xxx–<\/strong>xx), por\u00e9m, sem o tratamento necess\u00e1rio seria aprovado, mesmo os dados n\u00e3o sendo v\u00e1lidos. <\/p>\n\n\n\n

Exemplo CPF 02: 000.000.000-00 ou 222.222.222-22<\/strong> <\/p>\n\n\n\n

Isso ocorre porque o campo n\u00e3o possui o tratamento adequado para validar se o CPF corresponde \u00e0s condi\u00e7\u00f5es de ser um CPF v\u00e1lido.<\/p>\n\n\n\n

Por que usar m\u00e1scaras?<\/h2>\n\n\n\n

Aplicar m\u00e1scaras em React em campos de formul\u00e1rio limita os usu\u00e1rios com padr\u00f5es predefinidos. Isso evita o envio de dados incorretos e tamb\u00e9m deixa mais intuitivo ao usu\u00e1rio.<\/p>\n\n\n\n

Poder\u00edamos elaborar nossas pr\u00f3prias fun\u00e7\u00f5es, fazer a valida\u00e7\u00e3o das informa\u00e7\u00f5es e mostrar algum erro ap\u00f3s o usu\u00e1rio inserir o valor, mas esse processo leva um tempo desnecess\u00e1rio, sendo que existem libs para aplica\u00e7\u00e3o de m\u00e1scaras que ajudam na formata\u00e7\u00e3o dos dados em tempo real.<\/p>\n\n\n\n

No post de hoje, voc\u00ea aprender\u00e1 como fazer uso dessa ferramenta para aplicar as m\u00e1scaras no seu campo de formul\u00e1rio da maneira que preferir.<\/p>\n\n\n\n

LEIA TAMB\u00c9M <\/p>

Como fazer uma to do list em React?<\/a><\/p><\/blockquote>\n\n\n\n

Aplicando as m\u00e1scaras<\/h2>\n\n\n\n

Para fins did\u00e1ticos, trouxe dois exemplos pr\u00e1ticos com libs diferentes para a aplica\u00e7\u00e3o das m\u00e1scaras.<\/p>\n\n\n\n

Para adicionar m\u00e1scaras em campos de formul\u00e1rios, ser\u00e1 necess\u00e1rio uma aplica\u00e7\u00e3o no React, caso j\u00e1 tenha criado, ignore o passo 01.<\/p>\n\n\n\n

Passo 01 – Crie uma aplica\u00e7\u00e3o em React e entre no arquivo criado.<\/h3>\n\n\n\n