Así que pasamos un tiempo en la entrada, pero manejar la entrada del usuario
es importante, desea hacerlo de una manera que sea natural
para el usuario, que
tenga sentido para el usuario y donde nunca confíe en su usuario y siempre valide lo que el
usuario ingresa y profundizaremos en todo esto de la
validación, la entrada del usuario entrega cosas más adelante en el curso donde también aceptamos entradas
más complejas
que un número simple, pero por ahora, esta fue una excelente primera mirada a cómo puede diseñar una
entrada y cómo puede asegurarse de obtener los datos que necesita. Con eso, no sé sobre ti, pero creo que es hora de progresar
también con nuestro juego porque estamos algo atrapados aquí,
todos estos son pasos importantes, pero realmente no estamos progresando con nuestro juego o con nuestra aplicación aquí .
Así que asegurémonos de hacer eso como el siguiente paso y para eso,
¿por qué no nos aseguramos de que nuestros botones hagan algo? Comencemos con el botón de reinicio muy rápido porque será
muy simple. Cuando lo
presiona, por supuesto, simplemente quiero restablecer el valor introducido. Así que registraré una nueva función en el componente de
la pantalla de inicio del juego, asígnele el nombre de reiniciar el controlador de entrada y esa es solo la
convención de nomenclatura que me gusta, nombre estas funciones que se activan en un controlador de evento de usuario al final solo para hacerlo claro
que estos manejan ciertos eventos, no es algo
obligatorio, solo es una preferencia que tengo para las aplicaciones React en general y, por lo tanto, también para las aplicaciones
React Native.
Esta será una función que luego llama al valor ingresado establecido, que es nuestra función de configuración de estado
aquí para actualizar el estado que realimentamos en la entrada y configurar esto en una
cadena vacía y sí, con eso podemos conectar esto al botón de reinicio aquí, onPress ahora debería simplemente ejecutar el controlador
de entrada de reinicio de esa manera.
Intentemos
rápido, ingresemos algo aquí, reiniciemos y
desaparezca, se
ve bien y también
asegúrese de
que este botón aquí, el botón de confirmación, haga algo. Para eso, agregaré otro botón, confirmaré el controlador de entrada y podríamos simplemente comenzar el juego
inmediatamente aquí, pero también para practicar esto, quiero darle
al usuario una última oportunidad de cambiar su elección, así que aquí solo quiero aclarar de salida, esta es su elección, desea
iniciar el
mensaje, donde el usuario obtiene un botón para iniciar el juego, solo un paso adicional para que tengamos
algo de práctica adicional aquí. Para eso, agregaré un
nuevo estado que administra el estado confirmado por el usuario y al principio, eso es falso, pero por supuesto
podemos cambiar esto y queremos poder obtener el estado actual.
Entonces aquí obtenemos si el usuario ha confirmado o no y podemos
establecer este estado confirmado con ese segundo elemento en la matriz que estamos extrayendo. Entonces, allí abajo, en el controlador de entrada
de confirmación, configuré confirmar a verdadero, por cierto, en el controlador de entrada de reinicio, configuré esto en falso porque si el usuario
hace clic en reiniciar, el usuario ciertamente tiene que confirmar los valores, por lo que debemos
restablecer esto y luego aquí en el controlador de entrada
de confirmación, también quiero hacer dos cosas diferentes, otras dos cosas.
Uno es restablecer el valor introducido, pero también, por supuesto, guardar el valor introducido como el valor con el
que comenzaríamos el juego.
Podemos hacerlo con otro estado
que estamos administrando, que inicialmente no tiene nada, no tiene valor, está indefinido inicialmente porque ese debería ser el número seleccionado
y ahora también debería ser realmente un número y no algo de texto.
Entonces, aquí tenemos el número seleccionado y una función para configurarlo,
y cuando el usuario hizo clic en confirmar antes de restablecer mi valor ingresado, aunque aquí todo se agrupará de todos modos, por lo
que también podemos usar el valor ingresado aquí después de configurarlo en un cadena vacía porque esto solo se
hará en el próximo ciclo de renderizado y no inmediatamente después de que se ejecute esta línea.
Por lo tanto, aún podemos ejecutar o acceder a este valor ingresado de manera segura
si lo deseamos porque aquí, quiero establecer mi valor ingresado con parseInt pasando el valor ingresado, por lo que configuro este como mi número seleccionado y nuevamente, todavía puedo acceder ingresamos
el valor aquí a
pesar de que lo restablecimos porque este elemento de restablecimiento aquí básicamente se pondrá en cola por
React y solo se procesará la próxima vez que el componente se procese a partir de entonces
y
estos tres cambios de estado se agrupan para dar como resultado un ciclo de renderizado, por lo que puede acceder de
forma segura al valor ingresado aquí, pero también podemos hacerlo simplemente antes
de restablecerlo, no importa.
Sin embargo, lo importante es analizar esto como un número entero para convertir este texto en un
número aquí y, de hecho, agregaré otro paso adicional antes de hacerlo. Justo al principio, tendré mi número elegido aquí, que es
ese número analizado y antes de hacer
nada, quiero verificar si el número elegido no es un número que es un valor predeterminado de JavaScript, por lo que si
de alguna manera todavía no es un número a pesar de que estamos tratando de verificar si hay caracteres no válidos
o si el número elegido es menor o igual a cero.
Si es así, entonces solo quiero regresar, no
quiero continuar, por
lo que return terminará la ejecución de la función y no confirmará, no usará esto como un
valor porque el valor no
es válido, solo se permiten números positivos y No se permiten números no válidos.
Además, también quiero agregar un cheque adicional y verificar si el número elegido puede ser mayor que 99 porque eso
tampoco estaría permitido, quiero tener un
número entre 1 y 99 y debería ser un número. Si no cumple con ese criterio, regresaremos, ahora de lo
contrario estableceremos este número elegido como el número seleccionado y luego restableceremos la entrada y luego estas tres llamadas de
estado establecidas se agruparán y el componente se volverá a procesar y tendremos nuestro nuevo estado
que tiene este número tomado en cuenta como el número seleccionado. Entonces, ahora podemos conectar el controlador de entrada de confirmación
al botón de confirmación aquí y ahora, algunos comentarios visuales también serían buenos para ver
que la confirmación funcionó o también para obtener un error si violamos una de estas reglas aquí, para que no solo volver
pero también mostrar una alerta.
Ahora, comencemos con los comentarios antes de trabajar en la alerta. Para la retroalimentación, aquí debajo
de esta función, pero dentro de nuestro componente funcional, quiero verificar si hemos confirmado y luego configurar
algún contenido especial que debería enviarse.
Entonces, aquí tenemos la salida confirmada que normalmente no
está definida, pero si la hemos confirmado, la salida confirmada es un código jsx donde resumimos lo que ingresó el usuario y
le damos al usuario el botón de inicio del juego.
Ahora, solo para ver si funciona, vamos con algo de texto aquí y solo digamos el número elegido y
enviamos el número seleccionado aquí, el número seleccionado, este
es nuestro estado que estamos administrando aquí.
Entonces, como llamamos a set confirmado y así sucesivamente, el componente se volverá a representar cuando se elija,
por lo que toda la función del componente se ejecutará nuevamente y eso significa que confirmado será
verdadero para esta próxima ejecución porque lo configuramos como verdadero aquí y por lo
tanto, configuraremos
la salida confirmada para que sea ese texto y ahora podemos agregar la salida confirmada, digamos aquí debajo de nuestra tarjeta.
Entonces, quiero generar el resultado confirmado y eso no está definido, no
imprime
nada en la pantalla o es este texto. Con eso guardado si volvemos e ingreso el número y lo confirmo aquí, vemos el
número.
Si ingreso algo no válido como cero, no lo
vemos, por lo que nuestro cheque parece funcionar y, sin embargo, se genera un número válido.
Ahora ese no es el diseño final que quiero tener, pero eso prueba que funciona.
Antes de finalizar este diseño, asegurémonos de mostrar también una alerta si se ingresa algo no válido.