1 00:00:02,180 --> 00:00:04,700 El estado es un concepto crucial en la reacción. 2 00:00:05,060 --> 00:00:10,820 Y con nuestro conocimiento sobre el estado, ahora también podemos asegurarnos de que no solo creamos un objetivo ficticio, 3 00:00:10,940 --> 00:00:13,640 sino que reflejemos la entrada real del usuario. 4 00:00:14,060 --> 00:00:15,740 Entonces, para eso, volvamos a la nueva meta. 5 00:00:16,280 --> 00:00:24,860 Lo que desea hacer es almacenar la entrada del usuario en alguna variable en cada pulsación de tecla para que tengamos el último valor ingresado por 6 00:00:24,860 --> 00:00:32,300 el usuario y luego pasar ese valor ingresado a los accesorios en el objetivo del anuncio o a nuestro nuevo objetivo aquí en 7 00:00:32,300 --> 00:00:36,170 lugar de ese texto ficticio codificado que tenemos en este momento. 8 00:00:36,950 --> 00:00:37,750 Así que aquí tienes. 9 00:00:37,880 --> 00:00:43,610 Quiero capturar la entrada del usuario aquí y enviar esto en lugar de ir al texto aquí como parte del nuevo 10 00:00:43,610 --> 00:00:44,090 objetivo. 11 00:00:44,840 --> 00:00:54,470 Entonces podríamos crear una variable aquí, entrada del usuario o texto ingresado, que inicialmente es una cadena vacía. 12 00:00:55,280 --> 00:00:58,520 Y aquí, en la entrada, en realidad están configurados en caso de cambio. 13 00:00:58,580 --> 00:01:00,740 Podemos escuchar cuál se dispara y cada pulsación de tecla. 14 00:01:01,310 --> 00:01:02,570 Entonces ahora podemos agregar una función. 15 00:01:05,330 --> 00:01:07,240 Manejador de cambio de texto. 16 00:01:08,220 --> 00:01:14,400 Allí obtendremos un objeto de evento y ese objeto de evento mantendrá la entrada del usuario en el evento. 17 00:01:15,470 --> 00:01:21,080 Target, que se refiere al elemento de entrada, el valor del punto y, por lo tanto, podríamos establecer un texto igual 18 00:01:21,080 --> 00:01:21,620 a ese. 19 00:01:23,440 --> 00:01:26,410 Ahora, ingresar texto cambiará con cada pulsación de tecla. 20 00:01:26,620 --> 00:01:30,730 Una vez que vinculamos el cambio al controlador de cambio de texto de esta manera. 21 00:01:32,720 --> 00:01:37,790 Ahora, aquí en un nuevo objetivo, podemos usar enter text. 22 00:01:37,880 --> 00:01:39,160 ¿Y qué, el usuario ingresó aquí? 23 00:01:40,150 --> 00:01:45,900 Y a partir de entonces, bloqueemos toda la consola y ve aquí para que podamos ver que esto funciona, si 24 00:01:45,900 --> 00:01:50,310 ahora estamos seguros y entro en la prueba aquí y hago clic en el objetivo. 25 00:01:50,910 --> 00:01:52,890 Vemos que esto funciona y esto se muestra aquí. 26 00:01:54,050 --> 00:01:58,490 Este enfoque generalmente está bien, pero puede tener un pequeño defecto. 27 00:01:58,850 --> 00:02:01,430 ¿Qué sucede si queremos restablecer esto después de agregar un nuevo objetivo? 28 00:02:01,970 --> 00:02:04,340 Por supuesto, podemos ir a nuestro. 29 00:02:05,540 --> 00:02:06,560 Ad manejador de oro. 30 00:02:08,470 --> 00:02:12,490 Y una vez que creamos el nuevo objetivo, podemos, por supuesto, configurar ingresar el texto nuevamente en una cadena vacía. 31 00:02:13,330 --> 00:02:14,800 Pero, por supuesto, esto no hará nada. 32 00:02:15,280 --> 00:02:18,640 Si entré en su objetivo, ya ves, esto no se refleja aquí. 33 00:02:18,700 --> 00:02:19,960 ¿Por qué no se refleja? 34 00:02:20,470 --> 00:02:22,410 Porque el nuevo componente de oro no se procesó. 35 00:02:22,510 --> 00:02:24,170 Este no es el estado que estamos administrando. 36 00:02:24,190 --> 00:02:25,540 Esta es una variable regular. 37 00:02:25,600 --> 00:02:27,040 Entonces, por supuesto, podemos cambiarlo. 38 00:02:27,280 --> 00:02:28,930 Por supuesto que podemos usar para cambiar el valor. 39 00:02:29,230 --> 00:02:31,480 Pero si luego le damos un nuevo valor. 40 00:02:31,900 --> 00:02:37,150 Esto no se refleja en nuestra entrada porque esta entrada solo tiene una conexión con el controlador de cambio de texto. 41 00:02:37,480 --> 00:02:42,040 No sabe que debe reflejar el valor actual almacenado e ingresado el texto. 42 00:02:42,850 --> 00:02:47,260 Ahora podríamos decirle al componente de entrada que debería hacerlo vinculando su valor prop. 43 00:02:47,710 --> 00:02:52,390 Podemos vincular esto al texto ingresado y con papá le decimos el componente de entrada. 44 00:02:52,600 --> 00:02:58,300 Oye, el valor que se muestra en la entrada debe ser devaluado, almacenado e ingresado. 45 00:02:58,330 --> 00:02:58,870 Texto. 46 00:02:59,840 --> 00:03:02,540 Si hacemos eso, sabremos algo nuevo. 47 00:03:03,140 --> 00:03:07,430 Ahora, ya no podemos escribir allí, si escribo aquí, la entrada no se refleja. 48 00:03:08,000 --> 00:03:10,190 Ahora, si lo piensas, tiene sentido. 49 00:03:10,660 --> 00:03:16,010 Cuando le diga a reactance que la entrada debe representarse de manera tal que el valor sea ingresar, ingresar 50 00:03:16,460 --> 00:03:21,220 texto con cada pulsación de tecla que cambiemos, ingresar texto, pero ingresar texto no es estado. 51 00:03:21,230 --> 00:03:22,400 Es una variable regular. 52 00:03:22,850 --> 00:03:28,250 Entonces eso significa que cambiamos la variable con cada pulsación de tecla pero reaccionamos mil reescribiendo el componente de 53 00:03:28,250 --> 00:03:28,790 entrada. 54 00:03:28,880 --> 00:03:34,910 No refleja el valor actualizado para reaccionar, devaluar siempre como una cadena vacía porque esa fue la última vez que 55 00:03:34,910 --> 00:03:40,460 procesó este componente y el código X de descarga de Delford y, por lo tanto, como entrada. 56 00:03:41,180 --> 00:03:46,220 Por lo tanto, debemos decirle a Reaction que este es un estado y que cuando cambia, debe volver a representar nuestro J 57 00:03:46,220 --> 00:03:47,090 como código X. 58 00:03:47,990 --> 00:03:54,890 Entonces, nuevamente, podemos importarlo como estado aquí y convertir enter a text use ya estructurando aquí y su estado es 59 00:03:54,890 --> 00:04:00,080 inicialmente una cadena vacía o tiene una cadena vacía inicialmente aquí porque estoy administrando mi 60 00:04:00,080 --> 00:04:01,030 texto ingresado. 61 00:04:01,370 --> 00:04:06,250 Y el segundo elemento es una función para actualizar el estado que, por lo tanto, llamará al texto ingresado. 62 00:04:07,400 --> 00:04:14,690 Y ahora aquí, en cada pulsación de tecla, configuro mi texto ingresado para devaluar un valor objetivo del evento. 63 00:04:15,050 --> 00:04:20,240 Y aquí no necesitamos esa forma funcional de actualizar el estado porque tenemos un nuevo valor que 64 00:04:20,240 --> 00:04:22,160 no depende del estado anterior. 65 00:04:22,430 --> 00:04:25,010 Así que podemos actualizar para configurar de esta manera. 66 00:04:25,940 --> 00:04:27,410 Y ahora esto lo hará. 67 00:04:28,880 --> 00:04:35,330 Renderice este componente cada vez que escribamos, cada vez que llamemos a set, ingrese todavía en cada pulsación de tecla, lo que suena 68 00:04:35,360 --> 00:04:37,010 horrible pero que es genial. 69 00:04:37,130 --> 00:04:37,550 Reaccionar. 70 00:04:37,550 --> 00:04:43,460 Haremos esto de una manera muy eficiente y, por lo tanto, este último valor se reflejará en el elemento de 71 00:04:43,490 --> 00:04:43,850 entrada. 72 00:04:44,480 --> 00:04:51,230 Y aquí, en ADCO Handler, si queremos actualizar, ingresar, enviar un mensaje de texto y restablecerlo, podemos desactivar la recuperación, establecer, ingresar texto y 73 00:04:51,440 --> 00:04:53,570 volver a configurarlo en una cadena vacía. 74 00:04:54,280 --> 00:04:56,960 Y con eso ahora tenemos lo mejor de ambos mundos. 75 00:04:56,990 --> 00:04:59,300 Podemos ingresar algo aquí que todo funciona. 76 00:04:59,570 --> 00:05:05,690 Pero también podemos manipularlo y restablecerlo después de agregar un nuevo objetivo como este. 77 00:05:06,590 --> 00:05:09,980 Así que esto es ahora y nunca use el caso para la administración del estado. 78 00:05:10,100 --> 00:05:13,340 Y, por supuesto, hay muchos casos de uso en nuestra aplicación REACT. 79 00:05:13,940 --> 00:05:20,840 Y aquí estamos usando la gestión de estado para crear algo que a veces también se llama enlace de forma donde se 80 00:05:21,290 --> 00:05:27,020 vincula el valor de la entrada y en cada pulsación de tecla que estamos actualizando al valor, que 81 00:05:27,020 --> 00:05:32,660 luego vinculamos a la entrada para que siempre reflejemos el valor último valor dentro de la entrada. 82 00:05:32,990 --> 00:05:36,560 Pero también podemos gestionar esto de forma estatal. 83 00:05:36,770 --> 00:05:42,350 Entonces, ¿todos tenemos la oportunidad de manipular el valor desde nuestro código aquí y reflejar esto nuevamente en la 84 00:05:42,620 --> 00:05:43,910 entrada en este caso? 85 00:05:45,090 --> 00:05:50,550 Con eso, tenemos otro escenario de administración estatal y ahora podemos agregar nuestras propias metas.