1 00:00:02,330 --> 00:00:09,590 Entonces, el botón Agregar aquí llama aAddGoal y eso básicamente reenvía el objetivo a la aplicación. js, que es exactamente lo que necesitamos, pero lo 2 00:00:09,590 --> 00:00:10,860 que también debemos 3 00:00:11,030 --> 00:00:16,660 hacer es asegurarnos de que cuando agreguemos un nuevo objetivo, el modal se cierre. 4 00:00:16,700 --> 00:00:22,790 Ahora tenga en cuenta que al final controlamos la visibilidad modal desde el interior de la aplicación. js porque allí, tenemos el estado isAddMode 5 00:00:22,790 --> 00:00:29,690 que estamos cambiando cuando hacemos clic en este botón aquí, el botón agregar nuevo objetivo, por 6 00:00:29,690 --> 00:00:31,050 ejemplo, y 7 00:00:31,220 --> 00:00:38,900 este valor de estado, isAddMode se reenvía a la entrada de objetivo donde luego lo usamos para controlar la 8 00:00:38,900 --> 00:00:40,310 visibilidad de el modal 9 00:00:40,340 --> 00:00:46,580 Entonces, para asegurarnos de que el modal desaparezca, simplemente tenemos que cambiar isAddMode 10 00:00:46,580 --> 00:00:52,270 nuevamente dentro de la aplicación. js porque el nuevo valor se reenviará automáticamente a la entrada del objetivo. 11 00:00:52,310 --> 00:00:56,990 Entonces, todo lo que tenemos que hacer es agregar el controlador de objetivos donde establecemos los objetivos del 12 00:00:56,990 --> 00:01:03,920 curso, también tenemos que establecer isAddMode en falso porque hemos terminado de agregar. Ahora una pequeña nota al margen, la forma en que React funciona 13 00:01:03,920 --> 00:01:06,500 si está configurando dos estados uno detrás del 14 00:01:06,590 --> 00:01:08,230 otro, los agrupará, no volverá a 15 00:01:08,270 --> 00:01:14,060 representar el componente dos veces después del primer cambio y después del segundo cambio, en su lugar, básicamente se aplicará todos 16 00:01:14,060 --> 00:01:19,460 los cambios de estado a la vez y solo vuelven a renderizar el componente una vez que, por supuesto, 17 00:01:19,460 --> 00:01:20,110 es 18 00:01:20,120 --> 00:01:23,240 bueno, de lo contrario tendríamos un ciclo innecesario de renderizado allí 19 00:01:23,240 --> 00:01:29,960 y esta es simplemente una buena optimización que React hace por nosotros. Por lo tanto, podemos cambiar absolutamente dos estados diferentes uno después del 20 00:01:29,990 --> 00:01:31,760 otro de esta manera y con 21 00:01:31,760 --> 00:01:38,740 eso, el modal debería saber que también desaparecerá si configuramos esto como falso. Probémoslo aquí en 22 00:01:38,740 --> 00:01:40,430 iOS. 23 00:01:40,480 --> 00:01:46,320 Si agrego aprender React Native aquí, haga clic en Agregar, esto 24 00:01:46,420 --> 00:01:52,530 desaparece y ahora aprender mucho más, esto también funciona y todavía 25 00:01:52,530 --> 00:01:54,510 puedo eliminar elementos. 26 00:01:54,740 --> 00:01:58,910 Ahora para probar esto en Android, el mismo procedimiento que 27 00:01:59,060 --> 00:02:01,310 antes, reiniciemos esto en Android, 28 00:02:05,490 --> 00:02:11,840 haga clic en Agregar nuevo objetivo y aprenda React Native aquí, haga clic en Agregar y 29 00:02:11,850 --> 00:02:23,740 esto lo cierra, ahora también aprendamos mucho más aquí, así y esto también funciona correctamente. Ahora, dos pequeñas mejoras que todavía quiero aplicar, para una quiero borrar la entrada una 30 00:02:23,740 --> 00:02:29,800 vez que hayamos terminado y, además, quiero proporcionar un botón de cancelación, para que, en lugar 31 00:02:29,800 --> 00:02:36,550 de agregar esto, también podamos cancelar aquí para cerrar el modal sin agregar un elemento porque en este 32 00:02:36,610 --> 00:02:40,290 momento, eso no es algo que podamos hacer. 33 00:02:40,300 --> 00:02:43,300 Comencemos por borrar nuestra entrada aquí 34 00:02:43,300 --> 00:02:48,480 después de ingresar algo. Para eso en la entrada de objetivos, al 35 00:02:48,480 --> 00:02:49,530 final, tenemos ese 36 00:02:49,560 --> 00:02:56,370 objetivo ingresado y necesitamos restablecerlo una vez que agreguemos un nuevo objetivo. Ahora, por supuesto, agregamos un nuevo objetivo cuando presionamos ese 37 00:02:56,370 --> 00:03:01,690 botón de agregar y allí, al final, activamos una función que obtenemos con la ayuda del accesorio onAddGoal. 38 00:03:01,700 --> 00:03:07,110 Ahora, para borrar también nuestra entrada, lo que podemos hacer aquí es agregar una función dentro 39 00:03:07,290 --> 00:03:12,440 del componente de entrada de objetivos, agregar un controlador de objetivos o como quieran llamarlo, 40 00:03:12,560 --> 00:03:19,310 esta es una función que no tiene que tomar ningún argumento y Al final, ahora es esta función la que 41 00:03:19,310 --> 00:03:20,270 quiero activar. 42 00:03:20,300 --> 00:03:23,330 Por lo tanto, quiero activar agregar controladores de 43 00:03:23,360 --> 00:03:29,660 objetivos, por lo que mi propia función en este componente. Ahora aquí, quiero llamar a props en AddGoal sin 44 00:03:29,660 --> 00:03:35,630 vincular aquí, podemos llamarlo así porque cuando se ejecuta esta función, quiero ejecutarla, aquí solo estamos pasando 45 00:03:35,630 --> 00:03:39,340 un puntero a esta función sin paréntesis, así que aquí 46 00:03:39,340 --> 00:03:44,270 estamos no debe tener paréntesis para no ejecutar esto demasiado pronto, aquí absolutamente necesitamos 47 00:03:44,270 --> 00:03:49,460 paréntesis porque esto solo se ejecuta cuando esta función se ejecuta y es cuando quiero 48 00:03:49,460 --> 00:03:52,340 activar la función en mi componente principal, 49 00:03:52,340 --> 00:03:59,000 así que en el componente de la aplicación aquí. Y aquí para onAddGoal, por supuesto, todavía quiero reenviar mi objetivo ingresado 50 00:03:59,000 --> 00:03:59,390 aquí, 51 00:03:59,390 --> 00:04:03,770 por lo que este estado, quiero reenviar esto, pero a partir de entonces, también quiero borrarlo. 52 00:04:04,010 --> 00:04:06,140 Entonces, estableceré el objetivo ingresado 53 00:04:06,140 --> 00:04:10,930 nuevamente en una cadena vacía, lo que restablecerá el texto que ingresamos aquí. 54 00:04:10,970 --> 00:04:12,120 Entonces, eso es 55 00:04:12,140 --> 00:04:18,770 una cosa, la otra cosa es un botón que nos permite cerrar esto y para eso, podemos agregar un botón aquí y 56 00:04:18,950 --> 00:04:22,100 ese botón podría tener un título de cancelación porque al 57 00:04:22,100 --> 00:04:23,990 final eso es lo que debería 58 00:04:23,990 --> 00:04:24,880 hacer este 59 00:04:24,890 --> 00:04:29,410 botón y para cancelar botón, podría ser bueno no tener el color azul predeterminado, pero 60 00:04:29,420 --> 00:04:33,410 cambiar ese color y puede hacerlo agregando el accesorio de color aquí, por 61 00:04:33,410 --> 00:04:39,250 ejemplo, podríamos configurarlo en rojo aquí porque el rojo en mi opinión es un buen color para cancelar botón. 62 00:04:40,850 --> 00:04:44,960 Si guardamos esto y probamos esto aquí en iOS, vemos el 63 00:04:44,960 --> 00:04:47,540 botón cancelar y el botón Agregar 64 00:04:47,690 --> 00:04:55,300 y ahora si aprendo React Native aquí y agrego esto, esto se agrega y si vuelvo a abrir esto, verá 65 00:04:55,300 --> 00:05:02,830 que se borró y cancelar, por supuesto, no hace nada porque necesitamos conectar cancelar al componente de la aplicación 66 00:05:02,950 --> 00:05:06,280 donde controlamos la visibilidad mediante el control isAddMode. 67 00:05:07,330 --> 00:05:16,090 Así que aquí, también podemos agregar otro controlador de funciones en el componente de la aplicación ahora, cancelar el controlador de adición de objetivos o algo así, es 68 00:05:16,120 --> 00:05:16,870 un nombre 69 00:05:16,870 --> 00:05:21,040 muy largo, solo quiero tener claro qué hace esto y cuándo se llama. 70 00:05:21,040 --> 00:05:26,800 Entonces, aquí tenemos el controlador adicional de cancelar objetivo y al final aquí, simplemente podemos establecer isAddMode en 71 00:05:26,800 --> 00:05:28,540 falso, lo que cerrará 72 00:05:29,050 --> 00:05:31,020 el modal y, por supuesto, no 73 00:05:31,030 --> 00:05:36,550 estamos haciendo nada más, no estamos cambiando nuestros objetivos del curso porque cancelamos la adición y ahora, 74 00:05:36,550 --> 00:05:38,590 podemos reenviar esto al elemento objetivo, 75 00:05:38,650 --> 00:05:45,580 a la entrada objetivo, así que a nuestro componente aquí. Allí podemos agregar onCancel prop, por supuesto, el nombre de esa 76 00:05:45,580 --> 00:05:48,330 utilería depende de usted porque es su propia 77 00:05:48,580 --> 00:05:53,710 utilería en su propio componente y he enviado un puntero al controlador de adición de objetivos de 78 00:05:54,000 --> 00:05:59,480 cancelación a onCancel y ahora dentro de la entrada de objetivos, podemos active onCancel al presionar este botón. 79 00:05:59,500 --> 00:06:04,990 Así que aquí, agregamos onPress y queremos activar accesorios. onCancel aquí, así que la 80 00:06:04,990 --> 00:06:12,690 función que estamos recibiendo en nuestro onCancel prop. Con eso, el botón cancelar debería funcionar, sí 81 00:06:12,770 --> 00:06:14,260 funciona bien. 82 00:06:14,510 --> 00:06:17,830 Ahora también debería funcionar en Android, por supuesto, 83 00:06:17,900 --> 00:06:19,310 pero para probarlo, 84 00:06:19,310 --> 00:06:22,930 el mismo procedimiento de siempre, cerrémoslo y reiniciémoslo y, a 85 00:06:22,940 --> 00:06:31,340 partir de entonces, veamos si el borrado de la entrada funciona. Si ingreso o aprendo React Native aquí, haga clic en Agregar, sí, eso 86 00:06:31,340 --> 00:06:33,330 está vacío y cancelar también funciona. 87 00:06:33,350 --> 00:06:38,300 Ahora, con respecto al estilo aquí en Android, sería bueno tener algo de espacio entre los botones o en 88 00:06:38,390 --> 00:06:43,150 realidad en ambas plataformas, tal vez hacer que estos botones se sientan uno al lado del otro.