1 00:00:02,530 --> 00:00:05,110 Entonces, ¿cómo más podemos optimizar esto? 2 00:00:05,110 --> 00:00:11,350 Bueno, puede notar que este código jsx aquí al final puede repetirse una y otra vez, cada entrada 3 00:00:11,360 --> 00:00:12,590 se ve así. 4 00:00:12,640 --> 00:00:18,130 Tenemos una vista, tenemos una etiqueta con la entrada de texto en sí y también podríamos querer un texto de error 5 00:00:18,130 --> 00:00:19,140 que podamos mostrar. 6 00:00:19,270 --> 00:00:22,900 Por lo tanto, tendría sentido externalizar esto en un componente separado y 7 00:00:22,990 --> 00:00:25,370 eso es exactamente lo que quiero hacer. 8 00:00:25,480 --> 00:00:32,230 Iré a mi carpeta de componentes y allí, en la carpeta UI, agregaré una entrada. archivo js que contendrá un componente Reaccionar, por lo 9 00:00:32,230 --> 00:00:38,410 que importo reaccionar desde reaccionar, por supuesto, y luego importo un par de cosas desde React Native 10 00:00:38,410 --> 00:00:45,460 y estas cosas al final son mi vista, componente de texto, el componente de entrada de texto y la hoja 11 00:00:45,460 --> 00:00:54,210 de estilo porque yo ' También necesitaré esto de React Native y con eso aquí, podemos crear el componente de entrada aquí que obtiene 12 00:00:54,210 --> 00:01:01,410 accesorios y necesita devolver algunos jsx. Tendremos un objeto de estilos con Stylesheet. crear y, por 13 00:01:02,780 --> 00:01:08,230 supuesto, al final, exportamos esto como predeterminado aquí, este componente. 14 00:01:08,340 --> 00:01:18,420 Ahora, si volvemos a la pantalla de edición del producto, podemos cortar este código jsx del título, por lo que la vista circundante, el texto, la entrada de texto y 15 00:01:18,440 --> 00:01:23,890 esta parte del mensaje de error, lo cortamos de aquí, de la pantalla de edición 16 00:01:24,250 --> 00:01:32,700 del producto y lo movemos eso en la pantalla de entrada y allí, úselo como valor de retorno en el componente de entrada aquí. 17 00:01:32,740 --> 00:01:37,210 Ahora, por supuesto, necesitaremos ajustar esto un poco, pero ese es nuestro esqueleto general que quiero usar 18 00:01:37,210 --> 00:01:37,720 allí. 19 00:01:37,960 --> 00:01:42,720 Ahora también desde la pantalla de edición del producto, tomaré el 20 00:01:42,770 --> 00:01:49,270 estilo, allí esta etiqueta de control de formulario y el estilo de entrada se pueden eliminar 21 00:01:49,270 --> 00:01:55,440 y se deben mover al componente de entrada y luego a la hoja de estilo. 22 00:01:55,460 --> 00:02:00,740 Así que ahora con eso, por supuesto, esto solo se puede usar para un título y quiero crear un 23 00:02:00,740 --> 00:02:07,580 componente de entrada que se pueda usar para cualquier entrada, eso por ejemplo significa que la etiqueta aquí debe ser dinámica, por lo que esperaré 24 00:02:07,710 --> 00:02:10,830 conseguir esto en una etiqueta con un nombre tal vez. 25 00:02:13,740 --> 00:02:18,420 En general, también quiero asegurarme de que la entrada de texto se pueda configurar desde 26 00:02:18,420 --> 00:02:25,800 el exterior, por lo que reenviaré todos los accesorios que obtengo de mi componente de entrada aquí a la entrada de texto, para que en 27 00:02:25,800 --> 00:02:31,060 este componente de entrada, podamos configurar cosas como el tipo de teclado porque no quiero codificar esto aquí, 28 00:02:31,070 --> 00:02:31,570 en 29 00:02:31,570 --> 00:02:36,720 cambio, esto debería ser un contenedor reutilizable alrededor del componente de entrada de texto que se puede configurar 30 00:02:36,720 --> 00:02:37,570 desde el exterior. 31 00:02:37,800 --> 00:02:43,990 Entonces, estos ajustes aquí, por ejemplo, los cortaré desde aquí para que podamos configurarlos desde afuera, también eliminaré a 32 00:02:44,010 --> 00:02:46,530 estos oyentes porque realmente no los necesitamos. 33 00:02:52,130 --> 00:02:57,230 El texto de error aquí también debe ser configurable desde el exterior, por lo que comprobaré el 34 00:02:57,230 --> 00:02:58,640 texto de error de los 35 00:02:58,640 --> 00:03:02,720 accesorios aquí y, por supuesto, siempre puede dar a estos accesorios los nombres que 36 00:03:02,720 --> 00:03:07,570 desee, por supuesto, también tendremos que cambiar lo que asignamos aquí como valor y así sucesivamente, 37 00:03:07,570 --> 00:03:08,800 eso también cambiará. 38 00:03:09,350 --> 00:03:11,720 Pero ahora ya podemos comenzar a usar 39 00:03:11,720 --> 00:03:23,200 esa entrada aquí, vamos a la pantalla de edición del producto y allí, simplemente iré a la parte superior e importaré la entrada desde la carpeta de componentes, por supuesto y allí desde la 40 00:03:23,200 --> 00:03:27,210 carpeta UI y allí desde la entrada y luego puedo comenzar a 41 00:03:27,550 --> 00:03:32,770 usar el componente de entrada en el lugar donde anteriormente tenía mi componente de entrada de 42 00:03:32,770 --> 00:03:33,910 texto aquí. 43 00:03:34,000 --> 00:03:40,510 Entonces, solo agregaré la entrada y ahora en la entrada, podemos agregar la configuración que corté, como el tipo 44 00:03:40,510 --> 00:03:43,000 de teclado, etc. porque se reenviará. 45 00:03:43,180 --> 00:03:50,950 Podemos establecer nuestra etiqueta de título, como título y también nuestro posible texto de error como Ingrese un título válido, aunque eso no es todo 46 00:03:51,550 --> 00:03:55,470 lo que haremos con respecto a la validación, pero es un comienzo. 47 00:03:55,510 --> 00:03:57,250 Así es como podemos usar 48 00:03:59,130 --> 00:04:02,970 esta entrada y, por supuesto, así también podemos usarla para reemplazar las otras entradas. 49 00:04:02,970 --> 00:04:11,400 Entonces, por ejemplo, aquí, imageUrl, aquí configuré esto en imageUrl, ingrese una imageUrl válida tal vez, el tipo de teclado predeterminado está 50 00:04:11,400 --> 00:04:17,910 bien, no se requiere corrección automática de capitalización automática, tipo de tecla de retorno a continuación, podemos 51 00:04:17,910 --> 00:04:18,480 dejar 52 00:04:18,480 --> 00:04:23,070 eso, no lo estamos haciendo cualquier cosa con eso, podríamos agregar algo 53 00:04:23,070 --> 00:04:29,990 de lógica pero no lo estoy haciendo aquí. Por el precio, dejaré la representación condicional, pero allí, puedo 54 00:04:33,510 --> 00:04:42,300 agregar mi entrada aquí, establecer esto en el precio, ingrese un precio válido, el tipo de teclado aquí, por supuesto, no debería ser predeterminado, pero el teclado decimal, 55 00:04:42,330 --> 00:04:49,380 no necesita capitalización automática o corrección automática, así que eliminemos eso. Y para la descripción aquí, también agregaré 56 00:04:49,380 --> 00:04:58,740 mi entrada aquí, descripción, ingrese una descripción válida, el tipo de teclado puede ser predeterminado, puedo usar mayúsculas automáticas, 57 00:04:58,980 --> 00:05:05,700 corrección automática, sin embargo, no estableceré un tipo de tecla de retorno, pero aquí 58 00:05:05,700 --> 00:05:14,330 Quiero configurar multilínea así, lo que permite la edición multilínea y establecer el número de líneas para 59 00:05:14,330 --> 00:05:15,830 decir tres. 60 00:05:15,830 --> 00:05:20,630 Sin embargo, esto solo lo usa Android, pero allí restringirá la cantidad de líneas que puede 61 00:05:20,630 --> 00:05:25,580 ingresar, en iOS, esto no tendrá un efecto, pero así es como ahora puede usar este componente de 62 00:05:25,580 --> 00:05:27,470 entrada y aún configurarlo desde afuera. 63 00:05:27,470 --> 00:05:30,240 Dicho esto, como dije, aún no 64 00:05:30,260 --> 00:05:35,710 hemos terminado, ¿qué pasa con el valor y este cambio de escucha de texto? 65 00:05:35,840 --> 00:05:42,030 Hay diferentes maneras de cómo podría manejar esta entrada de texto o los valores de texto aquí. 66 00:05:42,050 --> 00:05:47,960 Todavía podría simplemente reenviarlo al componente principal y solo usar este componente de entrada como envoltorio visual, pero lo 67 00:05:48,080 --> 00:05:49,020 llevaré un 68 00:05:49,310 --> 00:05:55,850 poco más lejos y quiero administrar este valor y la validez de esta entrada única dentro del componente de entrada, de 69 00:05:56,180 --> 00:05:58,460 modo que Luego, solo informo a mi 70 00:05:58,460 --> 00:06:05,280 componente principal, así que al final de la pantalla de edición del producto cuál es el valor actual y si es válido 71 00:06:05,280 --> 00:06:07,900 o no, para que la validación no tenga 72 00:06:07,940 --> 00:06:11,980 que ocurrir dentro del componente principal, pero de nuevo, eso es totalmente activo 73 00:06:12,170 --> 00:06:17,480 a ti si quieres hacer eso o no. Aquí agregaré una nueva constante en el 74 00:06:17,480 --> 00:06:25,520 componente de entrada, el controlador de cambio de texto donde obtengo este texto de entrada porque eso es lo que ahora 75 00:06:25,550 --> 00:06:31,400 ato o lo que ya está enlazado y generalmente lo mantendré así, aunque no necesitamos 76 00:06:31,400 --> 00:06:33,380 el identificador aquí ya no 77 00:06:33,620 --> 00:06:39,560 es necesario vincular, por lo tanto, porque está dentro de una sola entrada, no necesitamos un 78 00:06:39,560 --> 00:06:40,810 identificador allí. 79 00:06:40,880 --> 00:06:44,150 Por lo tanto, esto ahora se activará en cada pulsación de tecla 80 00:06:44,150 --> 00:06:56,140 y, por lo tanto, ahora aquí, quiero verificar si esto es válido o no y también administrar mi valor de esa entrada. Ahora para eso, podemos usar nuevamente un reductor o estados individuales administrados con 81 00:06:56,140 --> 00:07:02,270 estado de uso o creados con estado de uso, pero buscaré un reductor y 82 00:07:02,300 --> 00:07:03,920 aquí tengo mi reductor 83 00:07:04,090 --> 00:07:12,300 de entrada, el nombre depende de usted, obtiene el estado, obtiene un acción y devuelve un nuevo estado al 84 00:07:12,300 --> 00:07:13,110 final. 85 00:07:13,440 --> 00:07:20,390 Luego, aquí en la entrada, puedo llamar a use reducer y reenviar o establecer esto en el reductor de entrada y mi estado inicial 86 00:07:20,550 --> 00:07:28,200 para esta entrada aquí será un simple objeto Javascript con tres valores. El valor que tiene actualmente, que inicialmente puede estar vacío, 87 00:07:28,260 --> 00:07:34,470 pero en realidad quiero permitirme establecer un valor inicial desde afuera porque lo necesitaremos, por ejemplo, 88 00:07:34,470 --> 00:07:37,230 cuando estamos editando productos, así que verifico 89 00:07:37,260 --> 00:07:41,570 si el valor inicial de accesorios está configurado , de nuevo, 90 00:07:41,610 --> 00:07:43,700 por supuesto, este es un 91 00:07:43,700 --> 00:07:46,980 nombre que puede elegir como desee y, si 92 00:07:46,980 --> 00:07:49,220 este es el caso, lo estableceré 93 00:07:49,230 --> 00:07:50,040 en 94 00:07:50,130 --> 00:07:53,460 el valor inicial de los accesorios, de lo contrario, 95 00:07:53,460 --> 00:08:03,600 me estableceré para establecer esto en una cadena vacía, luego también gestionaré si esto es válido o no, y nuevamente puedo verificar si los accesorios inicialmente 96 00:08:03,630 --> 00:08:05,160 válidos, digamos, están configurados. 97 00:08:05,160 --> 00:08:08,780 Si ese es el caso, tomaré automáticamente ese valor que 98 00:08:08,790 --> 00:08:11,750 debería ser verdadero o falso, si no 99 00:08:13,420 --> 00:08:16,440 es el caso, se tratará automáticamente como falso 100 00:08:16,450 --> 00:08:23,170 y también gestionaré si esto se ha tocado o no, así que si el usuario en realidad escribí aquí 101 00:08:23,260 --> 00:08:26,850 y esto puede ser útil para ayudarnos a proporcionar una 102 00:08:27,100 --> 00:08:33,760 mejor experiencia de usuario con respecto a cuándo mostramos errores de validación y aquí estableceré esto en falso inicialmente. 103 00:08:33,780 --> 00:08:40,260 Ahora, por supuesto, esto nos devolverá la instantánea del estado de entrada y una función de despacho 104 00:08:40,260 --> 00:08:46,920 que aquí también puedo nombrar despacho porque no tendremos conflicto de nombres y en el controlador de cambio 105 00:08:46,920 --> 00:08:54,420 de texto, por supuesto, despacharé una acción, una acción que, por lo tanto, creará aquí con un identificador de acción, 106 00:08:54,420 --> 00:09:00,040 el cambio de entrada, por ejemplo, que debe enviarse aquí, escriba el cambio de entrada 107 00:09:00,040 --> 00:09:08,930 y luego aquí en el reductor, podemos agregar una instrucción de cambio para mezclar las cosas, verificar el tipo de acción y para el 108 00:09:08,960 --> 00:09:16,150 cambio de entrada del caso , queremos hacer algo En el caso predeterminado, simplemente devolveré mi estado, 109 00:09:16,190 --> 00:09:22,400 por lo que no haré nada, pero aquí, por supuesto, quiero hacer otra cosa. 110 00:09:22,630 --> 00:09:27,730 Ahora aquí en el controlador de cambio de texto, obviamente envío el cambio de entrada y quiero 111 00:09:27,760 --> 00:09:29,320 reenviar el valor que almacené 112 00:09:29,410 --> 00:09:35,320 en una clave de valor, pero ahora aquí, también quiero hacer una validación específica de entrada y reenviar la información si 113 00:09:35,350 --> 00:09:39,550 la entrada es válida o no . Y para esto, adjunto 114 00:09:39,570 --> 00:09:45,040 encontrará alguna configuración de validación o algún código de validación que ahora lo guiaré. 115 00:09:45,210 --> 00:09:50,760 Aquí tengo una constante que configura una expresión regular de correo electrónico, por lo que una expresión regular que 116 00:09:50,760 --> 00:09:52,710 nos permite validar las direcciones de 117 00:09:52,710 --> 00:09:58,290 correo electrónico, todavía no tenemos entrada de dirección de correo electrónico, pero más tarde cuando agreguemos autenticación, tendremos eso y 118 00:09:58,290 --> 00:10:00,670 luego quiero poder para usar este componente de 119 00:10:00,780 --> 00:10:04,580 entrada, entonces este componente debe estar preparado para validar también los correos electrónicos. 120 00:10:04,740 --> 00:10:10,140 Entonces tengo la variable auxiliar válida aquí porque entonces tenemos un montón de verificaciones aquí. 121 00:10:10,140 --> 00:10:16,610 Ahora quiero asegurarme de que podemos establecer los criterios que queremos usar desde el exterior con la ayuda de accesorios, así que, por ejemplo, verifico si 122 00:10:16,620 --> 00:10:21,030 los accesorios necesarios están configurados, si está configurado como verdadero, así que si está configurado en absoluto y 123 00:10:21,030 --> 00:10:26,610 si ese es el caso, entonces esta verificación se realizará. Si no se establece el accesorio requerido, esta verificación 124 00:10:26,610 --> 00:10:31,620 no se realizará y, por lo tanto, esta validación no se realiza y ese es el 125 00:10:31,620 --> 00:10:33,870 caso para todas mis diferentes validaciones aquí. 126 00:10:34,080 --> 00:10:40,180 Por lo tanto, podemos establecer un accesorio requerido para verificar si no está vacío, si está vacío, establecemos que es válido como falso. 127 00:10:40,440 --> 00:10:46,140 Podemos configurar un accesorio de correo electrónico en el componente de entrada para validarlo como una dirección de correo electrónico válida y, si 128 00:10:46,320 --> 00:10:48,330 no lo es, lo configuramos como falso. 129 00:10:48,450 --> 00:10:55,260 Podemos verificar un número por ser demasiado pequeño o demasiado grande o una cadena por ser demasiado 130 00:10:55,260 --> 00:10:56,070 corta 131 00:10:56,070 --> 00:11:01,950 con el validador de longitud mínima y, por supuesto, podría agregar más lógica aquí, posiblemente 132 00:11:01,950 --> 00:11:09,800 también con un paquete como ValidateJs que ya mencioné anteriormente. Ahora con eso, tendré que es válido al final, lo cual es verdadero por 133 00:11:09,940 --> 00:11:16,520 defecto pero falso tan pronto como falla una validación y, por lo tanto, ahora podemos agregar que también es válido para esta acción 134 00:11:16,520 --> 00:11:17,060 enviada.