1 00:00:02,350 --> 00:00:06,760 Así que pasamos un tiempo en la entrada, pero manejar la entrada del usuario 2 00:00:06,760 --> 00:00:09,970 es importante, desea hacerlo de una manera que sea natural 3 00:00:09,970 --> 00:00:11,470 para el usuario, que 4 00:00:11,590 --> 00:00:17,000 tenga sentido para el usuario y donde nunca confíe en su usuario y siempre valide lo que el 5 00:00:17,020 --> 00:00:19,750 usuario ingresa y profundizaremos en todo esto de la 6 00:00:19,750 --> 00:00:24,760 validación, la entrada del usuario entrega cosas más adelante en el curso donde también aceptamos entradas 7 00:00:24,760 --> 00:00:25,520 más complejas 8 00:00:25,540 --> 00:00:31,030 que un número simple, pero por ahora, esta fue una excelente primera mirada a cómo puede diseñar una 9 00:00:31,210 --> 00:00:37,910 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 10 00:00:37,920 --> 00:00:40,710 también con nuestro juego porque estamos algo atrapados aquí, 11 00:00:40,710 --> 00:00:45,600 todos estos son pasos importantes, pero realmente no estamos progresando con nuestro juego o con nuestra aplicación aquí . 12 00:00:45,600 --> 00:00:49,520 Así que asegurémonos de hacer eso como el siguiente paso y para eso, 13 00:00:49,530 --> 00:00:56,690 ¿por qué no nos aseguramos de que nuestros botones hagan algo? Comencemos con el botón de reinicio muy rápido porque será 14 00:00:56,690 --> 00:00:58,760 muy simple. Cuando lo 15 00:00:58,790 --> 00:01:04,400 presiona, por supuesto, simplemente quiero restablecer el valor introducido. Así que registraré una nueva función en el componente de 16 00:01:04,410 --> 00:01:10,310 la pantalla de inicio del juego, asígnele el nombre de reiniciar el controlador de entrada y esa es solo la 17 00:01:10,310 --> 00:01:17,450 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 18 00:01:17,450 --> 00:01:19,840 que estos manejan ciertos eventos, no es algo 19 00:01:19,970 --> 00:01:26,210 obligatorio, solo es una preferencia que tengo para las aplicaciones React en general y, por lo tanto, también para las aplicaciones 20 00:01:26,210 --> 00:01:27,040 React Native. 21 00:01:27,260 --> 00:01:34,040 Esta será una función que luego llama al valor ingresado establecido, que es nuestra función de configuración de estado 22 00:01:34,220 --> 00:01:39,370 aquí para actualizar el estado que realimentamos en la entrada y configurar esto en una 23 00:01:39,460 --> 00:01:46,690 cadena vacía y sí, con eso podemos conectar esto al botón de reinicio aquí, onPress ahora debería simplemente ejecutar el controlador 24 00:01:46,700 --> 00:01:49,540 de entrada de reinicio de esa manera. 25 00:01:49,700 --> 00:01:50,780 Intentemos 26 00:01:50,780 --> 00:01:53,760 rápido, ingresemos algo aquí, reiniciemos y 27 00:01:53,780 --> 00:01:55,110 desaparezca, se 28 00:01:55,310 --> 00:01:57,440 ve bien y también 29 00:01:57,470 --> 00:01:58,790 asegúrese de 30 00:01:58,790 --> 00:02:09,390 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 31 00:02:09,420 --> 00:02:12,600 inmediatamente aquí, pero también para practicar esto, quiero darle 32 00:02:12,600 --> 00:02:20,030 al usuario una última oportunidad de cambiar su elección, así que aquí solo quiero aclarar de salida, esta es su elección, desea 33 00:02:20,200 --> 00:02:21,090 iniciar el 34 00:02:21,090 --> 00:02:27,050 mensaje, donde el usuario obtiene un botón para iniciar el juego, solo un paso adicional para que tengamos 35 00:02:27,360 --> 00:02:30,910 algo de práctica adicional aquí. Para eso, agregaré un 36 00:02:30,930 --> 00:02:38,800 nuevo estado que administra el estado confirmado por el usuario y al principio, eso es falso, pero por supuesto 37 00:02:38,910 --> 00:02:43,020 podemos cambiar esto y queremos poder obtener el estado actual. 38 00:02:43,020 --> 00:02:45,980 Entonces aquí obtenemos si el usuario ha confirmado o no y podemos 39 00:02:45,990 --> 00:02:52,410 establecer este estado confirmado con ese segundo elemento en la matriz que estamos extrayendo. Entonces, allí abajo, en el controlador de entrada 40 00:02:52,410 --> 00:03:00,160 de confirmación, configuré confirmar a verdadero, por cierto, en el controlador de entrada de reinicio, configuré esto en falso porque si el usuario 41 00:03:00,160 --> 00:03:05,710 hace clic en reiniciar, el usuario ciertamente tiene que confirmar los valores, por lo que debemos 42 00:03:05,710 --> 00:03:09,110 restablecer esto y luego aquí en el controlador de entrada 43 00:03:09,160 --> 00:03:12,750 de confirmación, también quiero hacer dos cosas diferentes, otras dos cosas. 44 00:03:12,880 --> 00:03:20,530 Uno es restablecer el valor introducido, pero también, por supuesto, guardar el valor introducido como el valor con el 45 00:03:20,530 --> 00:03:22,300 que comenzaríamos el juego. 46 00:03:22,390 --> 00:03:24,840 Podemos hacerlo con otro estado 47 00:03:24,880 --> 00:03:34,430 que estamos administrando, que inicialmente no tiene nada, no tiene valor, está indefinido inicialmente porque ese debería ser el número seleccionado 48 00:03:34,430 --> 00:03:40,370 y ahora también debería ser realmente un número y no algo de texto. 49 00:03:40,910 --> 00:03:44,400 Entonces, aquí tenemos el número seleccionado y una función para configurarlo, 50 00:03:44,480 --> 00:03:51,560 y cuando el usuario hizo clic en confirmar antes de restablecer mi valor ingresado, aunque aquí todo se agrupará de todos modos, por lo 51 00:03:51,610 --> 00:03:57,290 que también podemos usar el valor ingresado aquí después de configurarlo en un cadena vacía porque esto solo se 52 00:03:57,470 --> 00:04:02,540 hará en el próximo ciclo de renderizado y no inmediatamente después de que se ejecute esta línea. 53 00:04:02,540 --> 00:04:07,530 Por lo tanto, aún podemos ejecutar o acceder a este valor ingresado de manera segura 54 00:04:07,730 --> 00:04:17,930 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 55 00:04:18,050 --> 00:04:19,300 el valor aquí a 56 00:04:19,340 --> 00:04:24,980 pesar de que lo restablecimos porque este elemento de restablecimiento aquí básicamente se pondrá en cola por 57 00:04:25,190 --> 00:04:30,740 React y solo se procesará la próxima vez que el componente se procese a partir de entonces 58 00:04:30,740 --> 00:04:31,480 y 59 00:04:31,580 --> 00:04:38,660 estos tres cambios de estado se agrupan para dar como resultado un ciclo de renderizado, por lo que puede acceder de 60 00:04:38,660 --> 00:04:42,850 forma segura al valor ingresado aquí, pero también podemos hacerlo simplemente antes 61 00:04:42,860 --> 00:04:44,200 de restablecerlo, no importa. 62 00:04:44,210 --> 00:04:49,520 Sin embargo, lo importante es analizar esto como un número entero para convertir este texto en un 63 00:04:49,520 --> 00:04:57,050 número aquí y, de hecho, agregaré otro paso adicional antes de hacerlo. Justo al principio, tendré mi número elegido aquí, que es 64 00:04:57,140 --> 00:05:00,410 ese número analizado y antes de hacer 65 00:05:00,410 --> 00:05:08,660 nada, quiero verificar si el número elegido no es un número que es un valor predeterminado de JavaScript, por lo que si 66 00:05:08,660 --> 00:05:16,550 de alguna manera todavía no es un número a pesar de que estamos tratando de verificar si hay caracteres no válidos 67 00:05:16,550 --> 00:05:20,730 o si el número elegido es menor o igual a cero. 68 00:05:21,200 --> 00:05:24,140 Si es así, entonces solo quiero regresar, no 69 00:05:24,140 --> 00:05:25,430 quiero continuar, por 70 00:05:25,460 --> 00:05:31,580 lo que return terminará la ejecución de la función y no confirmará, no usará esto como un 71 00:05:31,850 --> 00:05:33,710 valor porque el valor no 72 00:05:33,830 --> 00:05:39,010 es válido, solo se permiten números positivos y No se permiten números no válidos. 73 00:05:39,020 --> 00:05:46,340 Además, también quiero agregar un cheque adicional y verificar si el número elegido puede ser mayor que 99 porque eso 74 00:05:46,350 --> 00:05:48,770 tampoco estaría permitido, quiero tener un 75 00:05:48,770 --> 00:05:56,600 número entre 1 y 99 y debería ser un número. Si no cumple con ese criterio, regresaremos, ahora de lo 76 00:05:56,840 --> 00:06:03,740 contrario estableceremos este número elegido como el número seleccionado y luego restableceremos la entrada y luego estas tres llamadas de 77 00:06:03,740 --> 00:06:09,440 estado establecidas se agruparán y el componente se volverá a procesar y tendremos nuestro nuevo estado 78 00:06:09,440 --> 00:06:17,790 que tiene este número tomado en cuenta como el número seleccionado. Entonces, ahora podemos conectar el controlador de entrada de confirmación 79 00:06:17,790 --> 00:06:23,700 al botón de confirmación aquí y ahora, algunos comentarios visuales también serían buenos para ver 80 00:06:23,700 --> 00:06:32,220 que la confirmación funcionó o también para obtener un error si violamos una de estas reglas aquí, para que no solo volver 81 00:06:32,220 --> 00:06:34,440 pero también mostrar una alerta. 82 00:06:35,320 --> 00:06:41,870 Ahora, comencemos con los comentarios antes de trabajar en la alerta. Para la retroalimentación, aquí debajo 83 00:06:42,650 --> 00:06:51,710 de esta función, pero dentro de nuestro componente funcional, quiero verificar si hemos confirmado y luego configurar 84 00:06:51,710 --> 00:06:54,990 algún contenido especial que debería enviarse. 85 00:06:55,010 --> 00:06:58,900 Entonces, aquí tenemos la salida confirmada que normalmente no 86 00:06:58,970 --> 00:07:07,340 está definida, pero si la hemos confirmado, la salida confirmada es un código jsx donde resumimos lo que ingresó el usuario y 87 00:07:07,340 --> 00:07:11,330 le damos al usuario el botón de inicio del juego. 88 00:07:11,330 --> 00:07:18,990 Ahora, solo para ver si funciona, vamos con algo de texto aquí y solo digamos el número elegido y 89 00:07:19,020 --> 00:07:22,470 enviamos el número seleccionado aquí, el número seleccionado, este 90 00:07:22,470 --> 00:07:25,700 es nuestro estado que estamos administrando aquí. 91 00:07:25,770 --> 00:07:32,100 Entonces, como llamamos a set confirmado y así sucesivamente, el componente se volverá a representar cuando se elija, 92 00:07:32,100 --> 00:07:38,010 por lo que toda la función del componente se ejecutará nuevamente y eso significa que confirmado será 93 00:07:38,040 --> 00:07:43,470 verdadero para esta próxima ejecución porque lo configuramos como verdadero aquí y por lo 94 00:07:43,500 --> 00:07:44,310 tanto, configuraremos 95 00:07:44,310 --> 00:07:51,820 la salida confirmada para que sea ese texto y ahora podemos agregar la salida confirmada, digamos aquí debajo de nuestra tarjeta. 96 00:07:51,820 --> 00:07:57,340 Entonces, quiero generar el resultado confirmado y eso no está definido, no 97 00:07:57,340 --> 00:07:57,940 imprime 98 00:07:58,060 --> 00:08:05,900 nada en la pantalla o es este texto. Con eso guardado si volvemos e ingreso el número y lo confirmo aquí, vemos el 99 00:08:05,900 --> 00:08:06,410 número. 100 00:08:06,950 --> 00:08:10,210 Si ingreso algo no válido como cero, no lo 101 00:08:10,250 --> 00:08:15,360 vemos, por lo que nuestro cheque parece funcionar y, sin embargo, se genera un número válido. 102 00:08:15,400 --> 00:08:19,200 Ahora ese no es el diseño final que quiero tener, pero eso prueba que funciona. 103 00:08:19,390 --> 00:08:26,170 Antes de finalizar este diseño, asegurémonos de mostrar también una alerta si se ingresa algo no válido.