Entonces, sigamos trabajando en esto y cambiemos esto a una función de controlador de cambio de
texto, que ahora
asignamos a onChange text aquí en el título, pero que también podemos agregar a nuestra imageUrl.
Entonces, aquí para el texto onChange, también configuré esto en el controlador de cambio de texto y ahora para que esto
funcione, debemos asegurarnos de que esta función obtenga información sobre la entrada para la que se activó, por
lo tanto, si simplemente escribió el título o en el Entrada de imageUrl.
Entonces, además de obtener el texto, también espero obtener un argumento
diferente, espero obtener mi identificador de entrada o algo así, puede nombrarlo como desee para que
esta función pueda reutilizarse para múltiples entradas de texto y aún así obtener información sobre
qué entrada
activó esto para que podamos reenviar esto a nuestro reductor, donde luego necesitaremos esta información para
actualizar nuestro estado correctamente.
Ahora para obtener esta funcionalidad de identificador de entrada, tenemos que ir a los lugares donde usamos el
controlador de cambio de texto y allí, por ejemplo, podemos usar bind o usar una función de flecha anónima envolvente para vincular esto donde
no me importa pero más lo más importante, para configurar los argumentos que obtendrá esta función
y hay un argumento especial que quiero pasar y ese es el identificador de entrada.
Y para esta función aquí, para esta función llamar a
esta entrada de texto, esto por supuesto sería título. Para esta entrada allí abajo, habríamos vinculado esta imagenUrl y
nuevamente este debería ser un identificador que también tiene en su estado allá arriba,
en su estado de forma que pasa al reductor. Con eso agregado, nos aseguraremos de que el controlador de cambio de texto se ejecute
y obtenga este argumento de identificador de entrada.
El argumento de texto también se recibirá porque ese es el argumento predeterminado que
React Native nos pasaría de todos modos y luego se recibirá automáticamente como último argumento en esa función.
Por lo tanto, no tenemos que hacerlo y en realidad no
podemos vincular esto aquí, se reenviará automáticamente.
Ahora tenemos una función de controlador de cambio de texto reutilizable aquí y
también podemos asignar esto a las otras entradas, como aquí a imageUrl, como aquí abajo por el precio, podemos vincular
el controlador de cambio de texto, vincular esto y luego el precio es nuestro identificador aquí
y, por supuesto, también para la descripción, allí pegamos esto y luego lo enlazamos y el identificador es la descripción.
Ahora este mismo controlador se puede usar para todas las entradas, pero en este momento, por
supuesto, hace una cosa, valida cada entrada para su longitud.
Ahora, eso puede tener sentido y
lo hace aquí, ninguna entrada debe estar vacía, pero es posible que también desee
alguna otra validación, por ejemplo, mi precio aquí debería ser un número mayor que cero, digamos,
por lo que el cero no está permitido como entrada. Eso, por otro lado, no es un criterio que
me importe en otras entradas. Encontraremos una solución elegante para esto más adelante, por
ahora sigamos con esta validación de denominador común más pequeña que podemos aplicar a todas las entradas para asegurarnos de que
al menos no estén vacías y centrémonos
en la función reductora y cómo nuestro estado de formulario debería cambiar cuando
se envíe esta acción de actualización de entrada de formulario con todos esos datos
porque ahora no pasará nada.
Tenemos nuestro estado inicial en el reductor allí y eso se pasará o almacenará en el estado
de formulario, pero este estado nunca cambiará.
Bueno, por eso enviamos una acción, ¿verdad?
Es por eso que hacemos esto
aquí, es por eso que se envía la actualización de entrada de formulario y es por eso que queremos escribir algún
código aquí en el reductor cuando esta acción nos llegue aquí.
Ahora, si esta acción nos alcanza, al final el objetivo es asegurarnos de actualizar esta instantánea de estado, nuestra
instantánea
de estado actual de manera adecuada.
Esto significa que, por ejemplo, necesitaremos algunos valores actualizados y para esto, creo un nuevo objeto porque
mis valores de
entrada aquí, ese es un objeto y crearé uno nuevo para reemplazarlo y, en primer lugar,
copiaré el existente indicar valores de entrada.
Tenga en cuenta que el estado aquí se pasa automáticamente, esa es nuestra instantánea del estado actual antes
de actualizarla y, por lo tanto, inicialmente, esta es la instantánea del estado aquí, por ejemplo, y tendrá una clave
de valores de entrada que a su
vez contiene un objeto y
eso es exactamente lo que Estoy copiando aquí, estoy copiando todos los pares clave-valor de esa instantánea de valores de entrada y luego
quiero reemplazar el par clave-valor para la entrada para la que se envió esta acción,
lo bueno es que adjuntamos la entrada Identificador de la acción. Entonces, podemos ir al reductor y
anular dinámicamente una clave aquí en los valores de entrada copiados,
la clave es acción. entrada, por supuesto, ese es nuestro identificador de entrada que adjuntamos a la acción
y el valor debe ser acción. valor, eso
es todo lo que necesitamos hacer. Por lo tanto, almacenamos dinámicamente el valor que
se envió con la entrada también asignada dinámicamente y actualizamos nuestros valores de entrada copiados.
Ahora podemos devolver un nuevo estado aquí porque ese es el objetivo de su propio reductor, como para
el reductor Redux, al final tiene que devolver una nueva instantánea de estado y
allí quiero copiar el estado existente pero anular los valores de entrada con el valores actualizados que copian mis valores anteriores para que no
se pierdan datos y luego reemplazan uno de los pares clave-valor allí. Ahora, obviamente, no todo es solo reemplazar
los valores o actualizar los valores, también
quiero actualizar mis validaciones.
Así que aquí están mis validaciones actualizadas y, al igual que con los valores, empiezo copiando mi clave
de validez de entrada porque la validez de entrada es una clave aquí como
puedes
ver y luego quiero reemplazar una validez para la entrada que obtenemos en la acción , por lo tanto, title, imageUrl o lo que sea
y reemplazar esto por acción es válida porque obtenemos la información de si es válida o
no como parte de la acción que se envía, ¿verdad?
Enviamos esto aquí en base a esta validación básica que tenemos aquí.
Ahora con eso, solo necesitamos actualizar esto aquí, por lo que nuestras
validaciones de entrada aquí son iguales a las validaciones actualizadas y ahora solo tenemos que administrar la
validez general del formulario. Para eso, agrego
una variable, una variable auxiliar, el formulario es válido, que inicialmente es verdadero y luego recorro todas
mis validaciones actualizadas, que son
mis antiguas validaciones copiadas y
luego la validez actualizada para la entrada que acabamos de escribir.
Entonces, aquí, tenemos un ciclo for / in donde revisamos todas las claves en las validaciones actualizadas y el objetivo es simple, verifico la
validez de cada entrada de formulario y si todas las validaciones de entrada de formulario son válidas, si todas
son verdaderas, entonces el total El formulario es válido.
Si al menos uno de ellos es
falso, el formulario general es falso, el formulario general no es válido. Por lo tanto, aquí el formulario es válido es igual al último estado válido
del formulario que tenemos y luego la validez de validez actualizada para la entrada que estamos viendo actualmente, así que para esta clave y
estamos revisando todas las entradas aquí.
La forma en que funciona este operador booleano es que este falso anula verdadero, por lo que si
alguna entrada es falsa, el formulario es válido se establecerá en falso y no se puede establecer en verdadero a partir de entonces.
Entonces, si al menos una entrada es inválida, el formulario general será inválido y, por
lo tanto, ahora ya no necesito copiar mi estado aquí porque reemplazaré toda la instantánea
del estado y establecer el formulario es válido para
que mi formulario derivado sea válido aquí y por supuesto, para evitar confusiones, también podríamos nombrar que este formulario actualizado es válido aquí y aquí y aquí y
aquí.
Ahora solo una cosa adicional, si no lo hacemos en este
bloque if, así que si se envió alguna otra acción o cualquier otra cosa, simplemente devolveré el estado sin
cambios aquí. Con eso, agregamos
una lógica reductora que puede manejar cualquier entrada o escribir en cualquiera de nuestras entradas de texto, ahora solo necesitamos usar el estado
del formulario que cambiará con cada pulsación de tecla, que es exactamente lo que sucedió
antes, pero ahora todo centralizado y se fusionó en un estado administrado que creo que es mucho más limpio
que tener toneladas de estados diferentes para validar y valorar. Y, por cierto, administrar todos estos estados de forma
manual y por separado se habría convertido en un gran problema cuando luego desea validar la validez general del formulario.
Así que ahora podemos usar el estado del formulario que cambiará con cada pulsación de tecla y lo
usamos, por ejemplo, aquí en los valores. Volvemos al valor de esta entrada de texto accediendo a los valores de entrada del estado del formulario. título.
Ahora, obviamente, hacemos lo mismo aquí para imageUrl, realimentamos esto, así que justo lo que hicimos antes y ahora
con nuestro estado de formulario administrado con la ayuda del
reductor, lo mismo por el precio, por supuesto, y lo mismo por el descripción, así.
Ahora, además de cambiarlo aquí, también tenemos que cambiarlo en otros lugares, por ejemplo, aquí en
el controlador de envío, por supuesto. Allí, el título es válido, esto
ya no existe, pero podemos verificar el título de validez de entrada del estado del formulario, que es verdadero o falso y si es falso, significa que no es
válido, por lo
que esta verificación debería estar bien.
Por supuesto, sin embargo, nos importa la validez de todas las entradas, por lo que en lugar
de verificarlas todas manualmente concatenandolas en una declaración if larga, podemos verificar si la forma de
estado del formulario es válida porque eso significa que alguna entrada es falsa y por lo tanto,
mostramos este
error, esa es la verificación más corta y, por supuesto, también es cuando queremos evitar que se envíe el formulario.
Sin embargo, si el formulario se envía, la descripción del título y la imagenUrl, que ya no existe, en su
lugar, ahora son valores de entrada del estado del formulario. título y así sucesivamente, así que
hacemos lo
mismo aquí para la descripción y para imageUrl. Derivamos nuestros valores del estado del
formulario, el mismo, por supuesto, aquí para crear. Obtenemos el título y la descripción y el imageUrl y también, por supuesto, el
precio que todavía convierto a un número con el signo más aquí, obtenemos todo eso
de nuestro estado de forma de los valores de entrada. Por lo tanto, por supuesto, nuestra dependencia aquí no es título, descripción,
imagenUrl, etc., sino que es solo el estado del formulario. Si el formulario indica cambios, lo que ocurrirá en cada
pulsación de tecla, entonces esta función debe reconstruirse y debe reconstruirse porque la información
que utiliza la función
cambia con cada pulsación de tecla,
la validez puede cambiar con cada pulsación de tecla, los valores que desee enviar puede cambiar con cada pulsación de tecla.
Por supuesto, ahora también podemos usar esto para mostrar nuestro mensaje de error. En lugar de verificar que el
título es
válido y que ya no existe, verificamos formState. inputValidities. título, si eso es falso, entonces quiero mostrar este texto.
Así que ahora
con eso, si guardamos todo eso, deberíamos poder verificar esto. Si vamos a nuestra página aquí,
vemos este error inicialmente.
Si empiezo a escribir, desaparece,
si trato de enviar esto, falla porque tengo tres entradas vacías.
Si ingreso algo válido allí, por otro
lado, esto funciona. Si intento editar, intentemos
esto en Android, tal vez para mezclar las cosas.
Entonces, si intento editar la camisa roja aquí, puedo enviar esto
bien, ahora también intentemos
enviar esto si está vacío, entonces recibo la alerta.
Así que esto funciona de la manera en
que debería funcionar, ahora con esta administración de formularios más elegante que usa el reductor de uso y, por supuesto, no solo puede
usar el reductor de
uso al trabajar con formularios, este es solo un ejemplo particularmente bueno para cuando tiene sentido fusionar múltiples estados
juntos y, por lo tanto, tienen un código altamente reutilizable y eficiente.
Sin embargo, todavía no he terminado porque toda esta repetición de código con las entradas aquí, que siempre están
estructuradas de la misma manera y las posibilidades de personalización que faltan con respecto a la validación, estas son las cosas
que quiero abordar a continuación.