Ahora para validar lo que ingresó el
usuario, por supuesto, quiero hacer algo en cada pulsación de tecla.
Ahora ya tenemos onChangeText aquí como oyente en el título, por ejemplo, y
lo que hacemos ahora es establecer el título en nuestro estado.
Ahora, el siguiente paso es no solo hacer
eso, sino no solo guardar la entrada, sino también validarla y también administrar la validez de esta entrada
en un estado.
Por lo tanto, agregaré una nueva función aquí, el controlador de cambio de título, por ejemplo, que obtiene el texto ingresado y luego puede hacer algo y simplemente
externalizaré esto en una función con nombre separada para tener un poco más limpio, más
fácil de seguir a lo largo del código porque ahora vincularé este oyente aquí a mi evento onChangeText, de modo
que esta función se active para cada pulsación de tecla y allí, por supuesto, todavía estableceré mi título con
el
texto, pero ahora, además, como dije, también quiero administrar la validez
y para eso podemos agregar otro estado que queremos administrar.
Entonces, tal vez aquí después de administrar el valor del título, también podemos hacer que el título sea un estado válido
o como quiera llamarlo y agregar el título del conjunto es válido aquí como una función
de establecimiento y luego este estado aquí
inicialmente podría ser falso para que inicialmente tratemos Esto no es válido. Ahora, por cada pulsación de tecla aquí en el controlador de cambio de título,
antes de que podamos almacenar esto y actualizar nuestro estado de título, podemos validar esto, por supuesto, y
ahora depende totalmente de usted cómo desea validar esto.
Ahora, por ejemplo, podría decir que esto solo es válido si tiene un texto que no está vacío, así que si la longitud del texto
es mayor que cero. El texto es una cadena,
por lo tanto, si la longitud es cero, significa que es una cadena vacía.
También podemos llamar a texto. recortar para recortar el espacio en blanco en exceso de modo que solo un montón de
espacio en blanco tampoco se considere válido.
Por supuesto, también puede agregar validación de longitud mínima o máxima al verificar la longitud aquí, puede
agregar validación de expresión regular para verificar el texto de ciertos patrones y en realidad
es algo que haremos más tarde
también, pero para comenzar, voy a comenzar simplemente
verifíquelo así y ahora aquí si somos mayores que cero, estamos
bien, pero en realidad si tenemos una longitud de cero, no estamos bien.
Entonces, aquí quiero establecer
que el título sea válido en falso, de lo contrario, establecemos que el título es
válido en
verdadero, por lo que si tenemos una entrada
válida y siempre configuraremos el título en sí, siempre tenemos que almacenar eso, nosotros nunca debe
perder esa entrada del usuario, de
lo contrario rompemos la aplicación.
Y ahora con la validez del título almacenada en el estado, podemos usarla, por supuesto, aquí en nuestro código jsx
para verificar si el título no es válido, por ejemplo, y si ese es el caso, podemos generar
dinámicamente un texto aquí donde, por ejemplo, decimos ingrese un título válido para mostrar un pequeño mensaje de error aquí al que,
por supuesto, también podría asignarle un estilo.
Ahora con eso, verá que si vamos a nuestra entrada aquí, vemos que el mensaje de error desde
el principio porque comenzamos en estado no válido y si comenzamos a escribir, esto desaparece,
pero si elimino toda la entrada, vuelve a aparecer y esto es alguna validación básica que podría agregar para mostrar un pequeño mensaje
de error o una pequeña pista a su usuario, para asegurarse de que los usuarios tengan al menos una idea
de qué tipo de entrada desea.
Ahora, por supuesto, no solo puede usar esta validez para generar mensajes de error, sino también para evitar que
su formulario se envíe si no es válido.
Entonces, aquí en el controlador de envío, donde siempre envío mis datos y creo o actualizo un producto sin importar si la entrada es
válida, allí podemos usar los datos de validez que reunimos y, por ejemplo,
verificar si el título es válido y si no lo es válido, de ahí el signo de exclamación,
luego regresamos, lo que significa
que cancelamos la
ejecución de la función y el código posterior no se ejecutará y, además, es posible que no
solo queramos regresar, por supuesto, también podemos importar alertas
de React Native y lanzar un bonita alerta nativa aquí. Entonces, simplemente podemos mostrar alerta con un mensaje
de entrada incorrecta o un título de eso y un mensaje de por favor verifique los errores en el formulario y luego simplemente agregue un botón
allí donde decimos que está bien porque no hay nada más que hacer para confirmar, bueno con eso
tenemos un
buen flujo aquí donde advertimos al usuario que la entrada no es válida.
Entonces, por ejemplo, ahora si trato de enviar esta entrada con mi título no válido, obtengo este error y
solo si ingreso un título válido, puedo enviarlo porque todavía no he agregado la validación para las otras
entradas que, por supuesto, deberíamos .
Entonces, así de fácil puede comenzar con la validación.
Ahora, como usamos Javascript aquí, por supuesto, también puede traer otras bibliotecas de validación de terceros, como ValidateJS,
que es un paquete que puede instalar en su proyecto y comenzar a usar para luego validar fácilmente cadenas para
ciertos patrones si lo desea Para hacer eso. En este módulo, escribiré los
patrones básicos que usamos manualmente para que comprenda claramente lo que realmente está
sucediendo allí, pero también puede incorporar bibliotecas de terceros.
Bueno, y ahora con esa comprensión básica sobre la validación, etc., asegurémonos de que
ahora también avancemos hacia una administración de formularios y entradas que sea más escalable y que no
involucre toneladas de estados que tenemos que administrar manualmente.