Así que se habló mucho, se hicieron muchas cosas, ahora es el
momento de hacer que este botón funcione y que agreguemos un objetivo aquí, justo
y para eso
necesitamos averiguar qué ingresó el usuario y, por supuesto, después escuche un toque en el botón
y luego agregue el objetivo ingresado a una serie de objetivos que tenemos que administrar en algún lugar, que luego podemos
mostrar en esta vista inferior, correcto, eso es
lo
que tenemos que hacer. Ahora, en este curso,
usaré componentes funcionales solo con la función React hooks que es relativamente nueva, por lo que en
caso de que aún no conozca React hooks, definitivamente aprenda sobre ellos primero, por ejemplo en mi
Guía
completa de React, cubro a fondo pero adjuntas también encontrará algunos otros recursos que
lo ayudarán a comenzar a usar React hooks porque necesitaremos React hooks para, por ejemplo, obtener la entrada del usuario.
Usamos el gancho useState para lo que importamos de React, no de React Native sino de React,
es una característica central
de React y luego aquí en este componente funcional, en este componente de la aplicación, podemos obtener el objetivo ingresado y también obtener
el conjunto ingresó la función de objetivo para actualizar el estado con la ayuda de useState y, de manera predeterminada, tenemos un estado
inicial que es una cadena vacía porque el usuario no ha ingresado nada al principio.
Ahora podemos vincular esto a la
entrada de texto, eso significa que cuando el usuario escribe un carácter, queremos actualizar nuestro estado y guardar el
texto ingresado en el estado aquí al que luego podemos acceder a través del objetivo ingresado
y pasaremos el objetivo ingresado volver a la entrada de texto. Ese es este enlace bidireccional, es un llamado componente controlado que también
conoce de React para web con elementos de entrada HTML normales.
Entonces, aquí podemos escuchar onChangeText, un accesorio proporcionado por la entrada de texto que toma una función que se
ejecutará para cada pulsación de tecla.
Ahora podríamos proporcionar una función en línea aquí, pero también podemos configurar una función separada para
tener un código un poco más limpio y usted puede tener una función en una función y necesitamos
tenerla aquí, para que podamos usar nuestro estado o establezca la función de objetivo ingresada aquí, simplemente agregando una nueva función aquí, el controlador de entrada de
objetivo podría ser un nombre, aunque el nombre depende de usted. En esa función, obtendremos el texto ingresado automáticamente,
que React o React Native pasarán aquí y luego podemos llamar al objetivo ingresado establecido y pasar el texto
ingresado como un valor porque el texto ingresado aquí ya será un cadena porque conectamos el
manejador de entrada de objetivo a onChangeText simplemente apuntándolo aquí. Ahora eso es importante, no agregue paréntesis allí porque esto
ejecutaría esta función cuando se analiza este código, por lo que cuando la interfaz de
usuario se procesa por primera vez. Sin embargo, no desea ejecutar esto de inmediato,
desea ejecutarlo en cada pulsación de tecla y, por lo tanto, simplemente toma el nombre de la función, pasa ese
nombre de la función a onChangeText y eso efectivamente le dice a React Native, oye, ese es el función que
debería ejecutar para cada pulsación de tecla, así que no agregue paréntesis aquí para que esto pueda ejecutarse en cada pulsación de tecla.
Ahora, en lugar de esta sintaxis de la función, por cierto, también puede usar una sintaxis diferente, que
es la que usaré a lo largo del curso, donde crea una constante con ese nombre aquí y luego el
valor de esa constante después del signo igual es simplemente un función usando esa sintaxis de función de flecha, entonces esta es su lista
de argumentos y este es el cuerpo de la función. Esa es la sintaxis normal de Javascript, es compatible
con el código Javascript React Native puede ejecutarse y, por lo tanto, esta es la sintaxis
que usaré, conéctela a onChangeText exactamente de la misma manera que antes. Bien, ahora que tenemos esta función conectada, actualizamos nuestro estado
con lo que el usuario ingresó en cada pulsación de tecla,
ahora también tenemos que pasar ese texto nuevamente a la entrada de texto, para que se muestre allí correctamente simplemente
vinculando la propiedad de valor a objetivo introducido, por lo que nuestro estado cambiará con cada pulsación de tecla.
Y con eso, tenemos acceso a la entrada del usuario porque ahora
siempre se almacenará en un objetivo ingresado. Ahora, cuando el usuario presiona el botón, queremos usar ese
objetivo ingresado, así que para eso agregaré otra función aquí, agregar el controlador de objetivos y eso es solo una convención de nomenclatura
que estoy usando para estas funciones aquí, puede nombrarlos como sea lo que quiera, sea lo que sea que
esté acostumbrado de sus aplicaciones React, al final el nombre de la función simplemente debe describir lo que va a suceder y
que aquí manejará presionar ese botón que al final agregará un objetivo. Aquí la función no tomará ningún argumento, pero en el cuerpo de la
función, quiero agregar mi objetivo ingresado a una lista de objetivos y todavía no tenemos una lista, así que por
ahora lo que hago aquí es el registro de la consola, que es compatible con React Objetivo nativo ingresado para que al menos veamos que
esto se guardó correctamente y que esta función se ejecuta. Sin embargo, para que esto se ejecute,
debemos conectarlo al botón, allí podemos agregar el accesorio onPress y apuntar al controlador de
agregar objetivo, nuevamente sin paréntesis para que esto no se ejecute de inmediato, sino solo cuando ocurre una presión.
Y ahora guardemos todo eso y regresemos y quizás ingresemos a Learn React Native y lo bueno es que puede usar su teclado real aquí
y presionar agregar y debería ver aquí en su terminal este registro, también verá esto por cierto en sus herramientas de desarrollo
de exposición aquí en la pestaña del navegador. Allí, si hace clic en uno de los
dispositivos conectados, en el que simplemente hace clic en el botón en mi
caso, el dispositivo Android, allí en la parte inferior también verá Learn React Native.
Y, por supuesto, también funciona en iOS, aprenda todo sobre React Native, si ingresamos esto aquí y hacemos clic en agregar, también
vemos que se registra aquí y también en las herramientas de desarrollo de exposiciones, si hacemos clic en el iPhone en el
Muy abajo, vemos este registro. Bien, entonces estamos obteniendo la
entrada del usuario, la estamos almacenando, la estamos registrando en la consola, por
supuesto, no queremos que la consola la registre, en su lugar, queremos mostrarla debajo de nuestra entrada, queremos
un lista de nuestros objetivos debajo de esta área de entrada. Entonces, para eso, necesitamos esa segunda vista aquí que debería mostrar nuestra lista de elementos.
Entonces, entre las etiquetas de apertura y cierre, quiero generar todos los elementos que
agregamos, todos los objetivos que agregamos. Para eso, en primer lugar, debemos administrar nuestros objetivos
y podemos configurar otro estado para el que inicialmente es una matriz vacía, por lo tanto, paso una matriz
vacía como un valor para usar State y allí tenemos nuestros objetivos del curso y un conjunto de objetivos del curso. función.
Ahora estos nombres siempre dependen de usted, pero deben describir qué hay en su estado y
cómo puede actualizarlo.
Así que ahora, cuando agregamos un objetivo, quiero actualizar los objetivos de mi curso para agregar el nuevo
objetivo y para eso, puedo llamar a establecer objetivos de curso y ahora establecer objetivos de curso a una nueva matriz donde tomo mis objetivos de curso anteriores y agrego un
uno nuevo.
Ahora, esta es la sintaxis que quizás no conozcas, ese es
el llamado operador de propagación, es una función de Javascript que toma una matriz existente y los objetivos
del curso son una matriz, es nuestra instantánea del estado actual antes de la actualización y extrae todos los elementos de esa matriz y luego
los agrega aquí a una nueva matriz, por eso tengo los corchetes circundantes, sin estos corchetes circundantes
esto
no funcionaría, pero ahora creamos una nueva matriz y agregamos todos los elementos de la matriz anterior y ahora
podemos También agregue un nuevo elemento.
Entonces, aquí, agrego una coma para agregar
un elemento adicional después de todos los elementos que estoy sacando aquí y el elemento que agrego aquí es mi objetivo ingresado, por supuesto.
Entonces, ahora actualizamos nuestra lista de objetivos con la lista anterior
de objetivos, inicialmente una lista vacía, pero luego crecerá con el tiempo porque también
agregamos un nuevo objetivo cuando presionamos ese botón. Ahora, una pequeña nota al margen, cuando se trabaja con
objetivos establecidos del curso, los objetivos del curso aquí son nuestro
estado anterior y la forma en que React actualiza el estado, esta siempre debe ser su instantánea de estado
más actual, pero no está 100% garantizado, tener esa garantía 100% ,
cuando actualiza su estado en función del estado anterior, puede usar la forma de función de esta función
de
conjunto donde no pasa el valor de su nuevo estado aquí, sino que lo pasa en una función, generalmente una
función anónima donde obtenga su estado actual o sus objetivos actuales, por lo que su instantánea del estado actual y
luego devuelve su valor actualizado, así que aquí devuelvo mi matriz actualizada con esa sintaxis de función de flecha en línea donde
si solo tiene una expresión, puede omitir las llaves y el declaración de devolución e ingrese
el valor que desea devolver y
se devolverá y eso es todo JavaScript normal aquí, nada React Native específico.
Entonces, aquí, tomo mis objetivos actuales y luego agrego mi objetivo ingresado. Esta sintaxis es un poco mejor, la otra sintaxis
habría funcionado también, pero está garantizado que siempre funcionará porque React Native siempre
seguirá adelante y le dará la garantía, la última instantánea de estado antes de que luego aplique su cambio
de estado aquí.
Ahora todo está bien, ahora tendremos una lista, una serie de objetivos gestionados aquí. ¿Cómo podemos ahora sacar esto?