1
00:00:02,250 --> 00:00:03,310
¿Tuviste éxito?

2
00:00:03,350 --> 00:00:04,710
Hagámoslo juntos.

3
00:00:04,710 --> 00:00:11,390
Creemos un nuevo componente aquí en la entrada de objetivo importando React from React y luego

4
00:00:11,500 --> 00:00:14,040
aquí, nombraré esta entrada de

5
00:00:14,040 --> 00:00:20,610
objetivo y me gusta esta sintaxis constante aquí, podría usar la entrada de objetivo de función

6
00:00:20,610 --> 00:00:28,120
para crear su componente funcional, eso estaría bien también. Luego aquí, exportaré la entrada de objetivo predeterminada y ahora aquí, tenemos que

7
00:00:28,120 --> 00:00:31,030
devolver algo y ese algo está al final de esta

8
00:00:31,030 --> 00:00:33,700
vista con la entrada de texto y el botón.

9
00:00:34,090 --> 00:00:42,650
Así que permítanme tomar esa vista completa, devolverla aquí entre paréntesis para que esté escrita en varias líneas y bien formateada y, por supuesto, ahora tenemos

10
00:00:42,650 --> 00:00:50,110
que volver a importar cosas de React Native porque estamos usando un par de componentes de React Native , estamos usando el

11
00:00:50,110 --> 00:00:55,840
componente de vista, estamos usando el componente de entrada de texto, estamos usando el componente de botón

12
00:00:55,840 --> 00:01:00,460
y también quiero usar el componente de hoja de estilo para configurar mi

13
00:01:00,460 --> 00:01:02,270
objeto de hoja de estilo.

14
00:01:02,470 --> 00:01:10,510
Entonces, para eso, agreguemos estilos aquí con Stylesheet. crear, pasar un objeto a esa hoja de estilo. cree el método y, por

15
00:01:11,140 --> 00:01:16,840
supuesto, tome los estilos de la aplicación. js, ese sería el contenedor de entrada y la entrada,

16
00:01:16,840 --> 00:01:21,540
por lo tanto, corte ambos para que solo quede la pantalla aquí y vuelva a ingresar el objetivo, agregaré

17
00:01:21,730 --> 00:01:28,510
ambos aquí a mi hoja de estilo para que esto vuelva a funcionar. Lo que no funcionará en este momento es que

18
00:01:28,510 --> 00:01:37,840
cuando tocamos el botón, agregamos esto porque aquí, no estamos teniendo el estado en la entrada de objetivos y cuando toco el botón, en realidad

19
00:01:37,870 --> 00:01:42,790
quiero hacer algo en la aplicación. js.

20
00:01:42,910 --> 00:01:49,480
Entonces, antes que nada, necesitamos dividir el estado. El objetivo ingresado no debe administrarse en la aplicación. js, pero debe administrarse en

21
00:01:49,480 --> 00:01:54,040
la entrada del objetivo porque allí es donde tenemos la entrada de texto

22
00:01:54,040 --> 00:02:01,360
al final, que es donde el usuario ingresa el objetivo. Así que agreguemos la importación useState aquí en la entrada del objetivo y luego

23
00:02:01,360 --> 00:02:08,950
agreguemos nuestra lógica de administración de estado aquí con el objetivo ingresado y establezcamos el objetivo ingresado que obtenemos de useState que inicializamos con una cadena vacía, agreguémoslo

24
00:02:08,950 --> 00:02:14,650
aquí a la entrada del objetivo y desde la aplicación. js, también tomaré el controlador de entrada de objetivo,

25
00:02:14,650 --> 00:02:18,780
lo cortaré desde allí y lo agregaré a la entrada de objetivo aquí,

26
00:02:18,820 --> 00:02:24,910
por lo que esta función en una función que conectamos a onChangeText y ahora con eso, recuperar la entrada del

27
00:02:24,910 --> 00:02:26,490
usuario debería funcionar nuevamente.

28
00:02:26,740 --> 00:02:32,660
Ahora para el botón, cuando presionamos esto, quiero activar una función en la aplicación. js, quiero activar el controlador para agregar objetivos y esa función debería

29
00:02:32,680 --> 00:02:38,360
permanecer aquí porque necesito administrar la lista aquí porque la aplicación. El archivo js es el único componente

30
00:02:38,560 --> 00:02:44,350
que tendrá acceso a la entrada de objetivos y a la FlatList donde sacamos los objetivos y,

31
00:02:44,350 --> 00:02:52,950
hablando de eso, ya podemos importar entradas de objetivos allí en la aplicación. js desde la entrada de objetivo de componentes y

32
00:02:52,950 --> 00:03:02,010
agregue la entrada de objetivo como un componente aquí arriba de FlatList, pero nuevamente, ahora tenemos que poder averiguar cuándo

33
00:03:02,010 --> 00:03:06,790
se presiona un botón en este componente y en React, lo

34
00:03:06,790 --> 00:03:14,740
hace pasando la función que el niño El componente debería ejecutarse eventualmente como un accesorio para el

35
00:03:14,740 --> 00:03:16,150
componente hijo.

36
00:03:16,150 --> 00:03:20,850
Así que aquí, podríamos agregar onAddGoal, ese nombre depende totalmente de usted, es un

37
00:03:20,860 --> 00:03:22,230
accesorio que usted

38
00:03:22,840 --> 00:03:25,990
define y esto apunta a agregar controlador de objetivos.

39
00:03:26,030 --> 00:03:32,980
Esto por sí solo no hará nada, pero onAddGoal ahora se recibirá como un accesorio dentro de la entrada del objetivo y

40
00:03:32,980 --> 00:03:37,520
apuntará a una función, lo que significa que podemos ejecutarla como una función allí.

41
00:03:37,540 --> 00:03:41,550
Entonces, en la entrada de objetivos, allí en la prensa,

42
00:03:41,950 --> 00:03:45,990
simplemente puedo señalar el accesorio. onAddGoal, ¿verdad?

43
00:03:46,000 --> 00:03:51,370
Porque onAddGoal es ese nombre de utilería que estoy configurando aquí en la aplicación. archivo js, que se recibe dentro de la

44
00:03:51,370 --> 00:03:57,430
entrada de objetivo en el objeto de accesorios que estamos obteniendo en cada componente funcional y puntos onAddGoal en

45
00:03:57,430 --> 00:04:00,200
una función, por lo que podemos pasarlo a

46
00:04:00,330 --> 00:04:05,630
onPress para que onPress o React Native sepan que debería llamar a esta función cuando presionamos

47
00:04:05,630 --> 00:04:06,470
el botón,

48
00:04:06,550 --> 00:04:09,430
así es como se hace esto en React Native.

49
00:04:09,430 --> 00:04:17,150
Aún así, tendríamos un problema porque al agregar el controlador de objetivos, me refiero al objetivo ingresado y que anteriormente se administró aquí pero ya

50
00:04:17,170 --> 00:04:19,670
no lo es, logramos el objetivo ingresado, que

51
00:04:19,750 --> 00:04:25,540
es la entrada de texto ingresada por el usuario en el objetivo entrada ahora y no en la

52
00:04:25,550 --> 00:04:26,340
aplicación. js.

53
00:04:26,950 --> 00:04:32,620
Por lo tanto, agregar un controlador de objetivos ahora debería recibir un argumento que es el título del objetivo o lo

54
00:04:32,620 --> 00:04:33,160
que

55
00:04:33,190 --> 00:04:37,530
quieras nombrar, este nombre depende de ti y eso es lo que almacenamos como valor aquí.

56
00:04:37,540 --> 00:04:47,700
Ahora tenemos que asegurarnos de reenviar este argumento cuando el objetivo de agregar se ejecuta en la entrada del objetivo.

57
00:04:48,870 --> 00:04:55,350
Entonces, eso sucede aquí en una prensa y allí apuntamos a esto para configurar también un argumento

58
00:04:55,350 --> 00:04:58,410
que eventualmente debería pasar, obtenemos dos opciones,

59
00:04:58,410 --> 00:05:02,620
la opción uno es que configuremos una función de flecha anónima aquí.

60
00:05:02,640 --> 00:05:08,250
Ahora esta función de flecha se ejecutará eventualmente y, por lo tanto, ahora podemos agregar

61
00:05:08,250 --> 00:05:09,930
paréntesis aquí porque ahora

62
00:05:09,960 --> 00:05:16,050
no se ejecutará cuando se procese primero, en cambio, esta función de flecha se registrará como

63
00:05:16,050 --> 00:05:17,730
una función que se

64
00:05:17,730 --> 00:05:25,230
ejecutará para onPress y ahora aquí en onAddGoal, podemos reenviar el objetivo ingresado, por ejemplo, que funcionaría o, alternativamente, no

65
00:05:25,290 --> 00:05:30,690
usamos este enfoque de función de flecha anónima y, por lo tanto, no podemos

66
00:05:30,690 --> 00:05:38,790
agregar paréntesis aquí, pero luego podemos usar otra función de Javascript, en funciones a las que podemos llamar bind to preconfigurar

67
00:05:39,120 --> 00:05:43,560
algunos argumentos que eventualmente deberían pasarse cuando se ejecuta esta función.

68
00:05:43,560 --> 00:05:47,190
El primer argumento es siempre a qué debe referirse esta palabra clave.

69
00:05:47,190 --> 00:05:52,680
Esto no nos importa aquí, por lo que podemos escribir esto, pero el segundo argumento aquí o todos

70
00:05:52,680 --> 00:05:58,440
los demás argumentos a partir de entonces serán en realidad los argumentos recibidos por esta función cuando se llama y

71
00:05:58,440 --> 00:06:00,270
se activa al presionar un botón.

72
00:06:00,270 --> 00:06:06,210
Estos son ahora los argumentos que se reenvían a la función onAddGoal, que al final es solo nuestra

73
00:06:06,210 --> 00:06:10,600
función de agregar controlador de objetivos y allí, necesitamos el título del objetivo,

74
00:06:10,620 --> 00:06:12,080
por lo que debemos

75
00:06:12,120 --> 00:06:17,740
reenviar esto, por lo tanto, aquí, ahora puedo configurar objetivo como argumento de reenvío y esa es

76
00:06:17,940 --> 00:06:20,760
la sintaxis normal de Javascript de vainilla aquí.

77
00:06:21,850 --> 00:06:24,740
Y ahora con esto, se está procesando, se ve bien

78
00:06:24,740 --> 00:06:25,920
y si entro

79
00:06:26,090 --> 00:06:31,340
en Learn React Native, todavía obtengo resultados aquí. Para que todo funcione, pero ahora dividimos

80
00:06:31,340 --> 00:06:36,770
esta aplicación en múltiples componentes, que es lo que normalmente haces en React apps y React

81
00:06:36,770 --> 00:06:42,740
Native, tal como lo haces en React para aplicaciones web porque mantiene tus componentes más ágiles, más enfocados

82
00:06:42,800 --> 00:06:46,550
y tu código más organizado y más fácil de entender