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
que también debemos
hacer es asegurarnos de que cuando agreguemos un nuevo objetivo, el modal se cierre.
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
que estamos cambiando cuando hacemos clic en este botón aquí, el botón agregar nuevo objetivo, por
ejemplo, y
este valor de estado, isAddMode se reenvía a la entrada de objetivo donde luego lo usamos para controlar la
visibilidad de el modal
Entonces, para asegurarnos de que el modal desaparezca, simplemente tenemos que cambiar isAddMode
nuevamente dentro de la aplicación. js porque el nuevo valor se reenviará automáticamente a la entrada del objetivo.
Entonces, todo lo que tenemos que hacer es agregar el controlador de objetivos donde establecemos los objetivos del
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
si está configurando dos estados uno detrás del
otro, los agrupará, no volverá a
representar el componente dos veces después del primer cambio y después del segundo cambio, en su lugar, básicamente se aplicará todos
los cambios de estado a la vez y solo vuelven a renderizar el componente una vez que, por supuesto,
es
bueno, de lo contrario tendríamos un ciclo innecesario de renderizado allí
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
otro de esta manera y con
eso, el modal debería saber que también desaparecerá si configuramos esto como falso. Probémoslo aquí en
iOS.
Si agrego aprender React Native aquí, haga clic en Agregar, esto
desaparece y ahora aprender mucho más, esto también funciona y todavía
puedo eliminar elementos.
Ahora para probar esto en Android, el mismo procedimiento que
antes, reiniciemos esto en Android,
haga clic en Agregar nuevo objetivo y aprenda React Native aquí, haga clic en Agregar y
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
vez que hayamos terminado y, además, quiero proporcionar un botón de cancelación, para que, en lugar
de agregar esto, también podamos cancelar aquí para cerrar el modal sin agregar un elemento porque en este
momento, eso no es algo que podamos hacer.
Comencemos por borrar nuestra entrada aquí
después de ingresar algo. Para eso en la entrada de objetivos, al
final, tenemos ese
objetivo ingresado y necesitamos restablecerlo una vez que agreguemos un nuevo objetivo. Ahora, por supuesto, agregamos un nuevo objetivo cuando presionamos ese
botón de agregar y allí, al final, activamos una función que obtenemos con la ayuda del accesorio onAddGoal.
Ahora, para borrar también nuestra entrada, lo que podemos hacer aquí es agregar una función dentro
del componente de entrada de objetivos, agregar un controlador de objetivos o como quieran llamarlo,
esta es una función que no tiene que tomar ningún argumento y Al final, ahora es esta función la que
quiero activar.
Por lo tanto, quiero activar agregar controladores de
objetivos, por lo que mi propia función en este componente. Ahora aquí, quiero llamar a props en AddGoal sin
vincular aquí, podemos llamarlo así porque cuando se ejecuta esta función, quiero ejecutarla, aquí solo estamos pasando
un puntero a esta función sin paréntesis, así que aquí
estamos no debe tener paréntesis para no ejecutar esto demasiado pronto, aquí absolutamente necesitamos
paréntesis porque esto solo se ejecuta cuando esta función se ejecuta y es cuando quiero
activar la función en mi componente principal,
así que en el componente de la aplicación aquí. Y aquí para onAddGoal, por supuesto, todavía quiero reenviar mi objetivo ingresado
aquí,
por lo que este estado, quiero reenviar esto, pero a partir de entonces, también quiero borrarlo.
Entonces, estableceré el objetivo ingresado
nuevamente en una cadena vacía, lo que restablecerá el texto que ingresamos aquí.
Entonces, eso es
una cosa, la otra cosa es un botón que nos permite cerrar esto y para eso, podemos agregar un botón aquí y
ese botón podría tener un título de cancelación porque al
final eso es lo que debería
hacer este
botón y para cancelar botón, podría ser bueno no tener el color azul predeterminado, pero
cambiar ese color y puede hacerlo agregando el accesorio de color aquí, por
ejemplo, podríamos configurarlo en rojo aquí porque el rojo en mi opinión es un buen color para cancelar botón.
Si guardamos esto y probamos esto aquí en iOS, vemos el
botón cancelar y el botón Agregar
y ahora si aprendo React Native aquí y agrego esto, esto se agrega y si vuelvo a abrir esto, verá
que se borró y cancelar, por supuesto, no hace nada porque necesitamos conectar cancelar al componente de la aplicación
donde controlamos la visibilidad mediante el control isAddMode.
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
un nombre
muy largo, solo quiero tener claro qué hace esto y cuándo se llama.
Entonces, aquí tenemos el controlador adicional de cancelar objetivo y al final aquí, simplemente podemos establecer isAddMode en
falso, lo que cerrará
el modal y, por supuesto, no
estamos haciendo nada más, no estamos cambiando nuestros objetivos del curso porque cancelamos la adición y ahora,
podemos reenviar esto al elemento objetivo,
a la entrada objetivo, así que a nuestro componente aquí. Allí podemos agregar onCancel prop, por supuesto, el nombre de esa
utilería depende de usted porque es su propia
utilería en su propio componente y he enviado un puntero al controlador de adición de objetivos de
cancelación a onCancel y ahora dentro de la entrada de objetivos, podemos active onCancel al presionar este botón.
Así que aquí, agregamos onPress y queremos activar accesorios. onCancel aquí, así que la
función que estamos recibiendo en nuestro onCancel prop. Con eso, el botón cancelar debería funcionar, sí
funciona bien.
Ahora también debería funcionar en Android, por supuesto,
pero para probarlo,
el mismo procedimiento de siempre, cerrémoslo y reiniciémoslo y, a
partir de entonces, veamos si el borrado de la entrada funciona. Si ingreso o aprendo React Native aquí, haga clic en Agregar, sí, eso
está vacío y cancelar también funciona.
Ahora, con respecto al estilo aquí en Android, sería bueno tener algo de espacio entre los botones o en
realidad en ambas plataformas, tal vez hacer que estos botones se sientan uno al lado del otro.