Agora, para validar o que o usuário
digitou, é claro que quero fazer algo a cada pressionamento de tecla.
Agora, já temos onChangeText aqui como ouvinte no título, por exemplo, e
o que fazemos agora é definir o título em nosso estado.
Agora, o próximo passo é não apenas
fazer isso, para não apenas salvar a entrada, mas também validá-la e também gerenciar a validade dessa entrada
em um estado.
Portanto, adicionarei uma nova função aqui, manipulador de mudança de título, por exemplo, que obtém o texto digitado e, em seguida, pode fazer alguma coisa. Vou terceirizar
isso em uma função nomeada separada para ter um pouco de limpeza e facilidade
de seguir ao longo do código, porque agora ligarei este ouvinte aqui ao meu evento onChangeText, para que esta
função seja acionada a cada pressionamento de tecla e, é claro, ainda definirei meu título com o texto, mas
agora,
além disso, como eu disse, também quero gerenciar a validade e,
para isso, podemos adicionar outro estado que queremos gerenciar.
Então, talvez aqui depois de gerenciar o valor do título, também possamos ter o título como estado válido ou o
que você quiser chamá-lo e adicionar o título do conjunto é válido aqui como uma função
setter e, em seguida, esse estado
aqui inicialmente pode ser falso, para que inicialmente tratemos isso como inválido. Agora, para cada pressionamento de tecla aqui no manipulador de alteração de título,
antes que possamos armazenar isso e atualizar nosso estado de título, podemos validar isso, é claro, e
agora cabe a você decidir como deseja validar isso.
Agora, por exemplo, você poderia dizer que isso só é válido se você tiver um texto que não esteja vazio, portanto, se o tamanho do texto
for maior que zero. O texto é uma sequência,
é claro, portanto, se o comprimento for zero, isso significa que é uma sequência vazia.
Também podemos chamar texto. aparar para aparar o excesso de espaço em branco, para que apenas um monte de espaço em
branco também não seja tratado como válido.
Obviamente, você também pode adicionar a validação de comprimento mínimo ou máximo, verificando o tamanho aqui. Você
pode adicionar validação de expressão regular para verificar o texto em relação a certos padrões.
Na verdade, é algo que faremos
mais tarde, mas, para começar, vou basta verificar
assim e agora aqui, se somos maiores que zero, estamos bem,
mas na verdade, se estamos tendo um comprimento de zero, não estamos bem.
Então, aqui, eu quero
que o título seja válido como falso, caso contrário, se o título for
válido,
é verdade, portanto, se tivermos uma entrada
válida e sempre definiremos o próprio título, sempre precisaremos armazenar isso, nunca deve perder
essa entrada do usuário, caso
contrário, interromperemos o aplicativo.
E agora com a validade do título armazenada no estado, podemos usá-lo, é claro, aqui em nosso código jsx
para verificar se o título não é válido, por exemplo, e se for esse o caso, podemos gerar
dinamicamente um texto aqui, onde, por exemplo, dizemos digite um título válido para mostrar aqui uma pequena mensagem de erro à
qual você também pode atribuir algum estilo.
Agora, com isso, você vê que, se formos para nossa entrada aqui, vemos que a mensagem de
erro desde o início, porque começamos no estado inválido e se começamos a digitar, isso
desaparece, mas se eu remover toda a entrada, ela reaparece e é alguma validação básica que você pode adicionar para mostrar uma pequena
mensagem de erro ou uma pequena dica para o usuário, para garantir que eles tenham pelo menos uma idéia de
qual tipo de entrada você deseja.
Agora, é claro, você pode não apenas usar essa validade para gerar mensagens de erro, mas também para evitar
que seu formulário seja enviado se for inválido.
Portanto, aqui no manipulador de envio, onde sempre submeto meus dados e crio ou atualizo um produto, independentemente da entrada ser válida, podemos
usar os dados de validade que reunimos e, por exemplo, verificar se
o título é válido e se não é válido, daí o ponto de exclamação, retornamos, o que
significa que cancelamos a execução
da função e
o código a partir de então não será executado e, além disso, talvez não desejemos apenas
retornar, é claro que também podemos importar alertas
do React Native e lançar um bom alerta nativo aqui. Então, podemos simplesmente mostrar alerta com uma
mensagem de entrada incorreta ou um título e uma mensagem de, por favor, verifique os erros no formulário e, em seguida, basta adicionar um
botão lá onde dizemos ok, porque não há mais nada a fazer para confirmar, bem com isso,
temos um
bom fluxo aqui, onde alertamos o usuário que a entrada é inválida.
Então, por exemplo, agora, se eu tentar enviar essa entrada com meu título inválido, recebo esse erro e somente
se eu inserir um título válido, posso enviá-lo porque ainda não adicionei a validação para as outras entradas,
que é claro que deveríamos .
Portanto, é assim que você pode começar a validação com facilidade.
Agora que usamos o Javascript aqui, é claro que você também pode trazer outras bibliotecas de validação de terceiros, como,
por exemplo, o ValidateJS, que é um pacote que você pode instalar no seu projeto e começar a usá-lo para validar facilmente
as strings de certos padrões, se quiser fazer isso. Neste módulo, escreverei os padrões básicos
que
usamos manualmente, para que você tenha uma compreensão clara do que realmente está
acontecendo lá, mas também pode trazer essas bibliotecas de terceiros.
Bem, e agora com esse entendimento básico sobre validação e assim por diante,
vamos garantir que também passemos a um gerenciamento de formulário e entrada mais escalável e que
não envolva muitos estados que precisamos gerenciar manualmente.