Entonces, ¿cómo más podemos optimizar esto?
Bueno, puede notar que este código jsx aquí al final puede repetirse una y otra vez, cada entrada
se ve así.
Tenemos una vista, tenemos una etiqueta con la entrada de texto en sí y también podríamos querer un texto de error
que podamos mostrar.
Por lo tanto, tendría sentido externalizar esto en un componente separado y
eso es exactamente lo que quiero hacer.
Iré a mi carpeta de componentes y allí, en la carpeta UI, agregaré una entrada. archivo js que contendrá un componente Reaccionar, por lo
que importo reaccionar desde reaccionar, por supuesto, y luego importo un par de cosas desde React Native
y estas cosas al final son mi vista, componente de texto, el componente de entrada de texto y la hoja
de estilo porque yo ' También necesitaré esto de React Native y con eso aquí, podemos crear el componente de entrada aquí que obtiene
accesorios y necesita devolver algunos jsx. Tendremos un objeto de estilos con Stylesheet. crear y, por
supuesto, al final, exportamos esto como predeterminado aquí, este componente.
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
esta parte del mensaje de error, lo cortamos de aquí, de la pantalla de edición
del producto y lo movemos eso en la pantalla de entrada y allí, úselo como valor de retorno en el componente de entrada aquí.
Ahora, por supuesto, necesitaremos ajustar esto un poco, pero ese es nuestro esqueleto general que quiero usar
allí.
Ahora también desde la pantalla de edición del producto, tomaré el
estilo, allí esta etiqueta de control de formulario y el estilo de entrada se pueden eliminar
y se deben mover al componente de entrada y luego a la hoja de estilo.
Así que ahora con eso, por supuesto, esto solo se puede usar para un título y quiero crear un
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é
conseguir esto en una etiqueta con un nombre tal vez.
En general, también quiero asegurarme de que la entrada de texto se pueda configurar desde
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
este componente de entrada, podamos configurar cosas como el tipo de teclado porque no quiero codificar esto aquí,
en
cambio, esto debería ser un contenedor reutilizable alrededor del componente de entrada de texto que se puede configurar
desde el exterior.
Entonces, estos ajustes aquí, por ejemplo, los cortaré desde aquí para que podamos configurarlos desde afuera, también eliminaré a
estos oyentes porque realmente no los necesitamos.
El texto de error aquí también debe ser configurable desde el exterior, por lo que comprobaré el
texto de error de los
accesorios aquí y, por supuesto, siempre puede dar a estos accesorios los nombres que
desee, por supuesto, también tendremos que cambiar lo que asignamos aquí como valor y así sucesivamente,
eso también cambiará.
Pero ahora ya podemos comenzar a usar
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
carpeta UI y allí desde la entrada y luego puedo comenzar a
usar el componente de entrada en el lugar donde anteriormente tenía mi componente de entrada de
texto aquí.
Entonces, solo agregaré la entrada y ahora en la entrada, podemos agregar la configuración que corté, como el tipo
de teclado, etc. porque se reenviará.
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
lo que haremos con respecto a la validación, pero es un comienzo.
Así es como podemos usar
esta entrada y, por supuesto, así también podemos usarla para reemplazar las otras entradas.
Entonces, por ejemplo, aquí, imageUrl, aquí configuré esto en imageUrl, ingrese una imageUrl válida tal vez, el tipo de teclado predeterminado está
bien, no se requiere corrección automática de capitalización automática, tipo de tecla de retorno a continuación, podemos
dejar
eso, no lo estamos haciendo cualquier cosa con eso, podríamos agregar algo
de lógica pero no lo estoy haciendo aquí. Por el precio, dejaré la representación condicional, pero allí, puedo
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,
no necesita capitalización automática o corrección automática, así que eliminemos eso. Y para la descripción aquí, también agregaré
mi entrada aquí, descripción, ingrese una descripción válida, el tipo de teclado puede ser predeterminado, puedo usar mayúsculas automáticas,
corrección automática, sin embargo, no estableceré un tipo de tecla de retorno, pero aquí
Quiero configurar multilínea así, lo que permite la edición multilínea y establecer el número de líneas para
decir tres.
Sin embargo, esto solo lo usa Android, pero allí restringirá la cantidad de líneas que puede
ingresar, en iOS, esto no tendrá un efecto, pero así es como ahora puede usar este componente de
entrada y aún configurarlo desde afuera.
Dicho esto, como dije, aún no
hemos terminado, ¿qué pasa con el valor y este cambio de escucha de texto?
Hay diferentes maneras de cómo podría manejar esta entrada de texto o los valores de texto aquí.
Todavía podría simplemente reenviarlo al componente principal y solo usar este componente de entrada como envoltorio visual, pero lo
llevaré un
poco más lejos y quiero administrar este valor y la validez de esta entrada única dentro del componente de entrada, de
modo que Luego, solo informo a mi
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
o no, para que la validación no tenga
que ocurrir dentro del componente principal, pero de nuevo, eso es totalmente activo
a ti si quieres hacer eso o no. Aquí agregaré una nueva constante en el
componente de entrada, el controlador de cambio de texto donde obtengo este texto de entrada porque eso es lo que ahora
ato o lo que ya está enlazado y generalmente lo mantendré así, aunque no necesitamos
el identificador aquí ya no
es necesario vincular, por lo tanto, porque está dentro de una sola entrada, no necesitamos un
identificador allí.
Por lo tanto, esto ahora se activará en cada pulsación de tecla
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
estado de uso o creados con estado de uso, pero buscaré un reductor y
aquí tengo mi reductor
de entrada, el nombre depende de usted, obtiene el estado, obtiene un acción y devuelve un nuevo estado al
final.
Luego, aquí en la entrada, puedo llamar a use reducer y reenviar o establecer esto en el reductor de entrada y mi estado inicial
para esta entrada aquí será un simple objeto Javascript con tres valores. El valor que tiene actualmente, que inicialmente puede estar vacío,
pero en realidad quiero permitirme establecer un valor inicial desde afuera porque lo necesitaremos, por ejemplo,
cuando estamos editando productos, así que verifico
si el valor inicial de accesorios está configurado , de nuevo,
por supuesto, este es un
nombre que puede elegir como desee y, si
este es el caso, lo estableceré
en
el valor inicial de los accesorios, de lo contrario,
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
válidos, digamos, están configurados.
Si ese es el caso, tomaré automáticamente ese valor que
debería ser verdadero o falso, si no
es el caso, se tratará automáticamente como falso
y también gestionaré si esto se ha tocado o no, así que si el usuario en realidad escribí aquí
y esto puede ser útil para ayudarnos a proporcionar una
mejor experiencia de usuario con respecto a cuándo mostramos errores de validación y aquí estableceré esto en falso inicialmente.
Ahora, por supuesto, esto nos devolverá la instantánea del estado de entrada y una función de despacho
que aquí también puedo nombrar despacho porque no tendremos conflicto de nombres y en el controlador de cambio
de texto, por supuesto, despacharé una acción, una acción que, por lo tanto, creará aquí con un identificador de acción,
el cambio de entrada, por ejemplo, que debe enviarse aquí, escriba el cambio de entrada
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
cambio de entrada del caso , queremos hacer algo En el caso predeterminado, simplemente devolveré mi estado,
por lo que no haré nada, pero aquí, por supuesto, quiero hacer otra cosa.
Ahora aquí en el controlador de cambio de texto, obviamente envío el cambio de entrada y quiero
reenviar el valor que almacené
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
la entrada es válida o no . Y para esto, adjunto
encontrará alguna configuración de validación o algún código de validación que ahora lo guiaré.
Aquí tengo una constante que configura una expresión regular de correo electrónico, por lo que una expresión regular que
nos permite validar las direcciones de
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
luego quiero poder para usar este componente de
entrada, entonces este componente debe estar preparado para validar también los correos electrónicos.
Entonces tengo la variable auxiliar válida aquí porque entonces tenemos un montón de verificaciones aquí.
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
los accesorios necesarios están configurados, si está configurado como verdadero, así que si está configurado en absoluto y
si ese es el caso, entonces esta verificación se realizará. Si no se establece el accesorio requerido, esta verificación
no se realizará y, por lo tanto, esta validación no se realiza y ese es el
caso para todas mis diferentes validaciones aquí.
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.
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
no lo es, lo configuramos como falso.
Podemos verificar un número por ser demasiado pequeño o demasiado grande o una cadena por ser demasiado
corta
con el validador de longitud mínima y, por supuesto, podría agregar más lógica aquí, posiblemente
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
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
enviada.