Ahora, con esta acción siendo enviada, podemos ir al reductor y escribir un código aquí en el cambio de entrada y ese
es un código muy simple.
Devolvemos un nuevo estado donde copio mi estado anterior y quiero actualizar el valor con acción. valor porque el valor es una propiedad que tengo en esta
acción, la otra es isValid y esa es la otra cosa que también quiero actualizar
en cada pulsación de tecla, isValid para esta entrada, no para todo
el formulario sino para esta entrada administrada internamente. No actualizaré tocado aquí, en su lugar, tocado debería actualizarse cuando realmente
perdemos el foco porque eso significa que el usuario ha terminado de ingresar contenido por el
momento, por lo que ahora quiero marcar esto como tocado y posiblemente mostrar errores de validación. Entonces, aquí, el controlador de foco perdido es una
función que agrego y allí, enviaré una
acción. Ahora para
eso, crearé un identificador de acción
aquí, entrada borrosa, como esta, entrada borrosa como esta y ahora podemos enviar entrada borrosa aquí, no es necesario adjuntar ningún dato y ahora en nuestro reductor, podemos usar que
con otro caso, entrada borrosa y si ese es el caso, devuelvo un nuevo estado donde copio el estado anterior
porque quiero mantener el valor y es válido y no cambiar eso, pero
quiero establecer tocado en verdadero, así que tan pronto a medida que difuminamos una entrada, se trata como tocada.
Ahora solo necesitamos conectar esta función, así que configuraré el oyente onBlur aquí y apuntaré al controlador de foco perdido para que
se active cuando esta entrada se vuelva borrosa.
Ahora, todo está bien y esto administrará el estado dentro de esta entrada, por supuesto, todavía necesito
reenviar el valor y la información, ya sea que esa entrada sea válida o no,
a mi padre, así que a la pantalla de edición del producto. Por lo tanto, lo que podemos hacer es agregar el efecto de uso aquí como
una
importación en el componente de entrada y tal vez agregarlo aquí y en la función de efecto de uso, quiero llamar a una función que espero obtener
a través de accesorios, tal vez en el cambio de entrada, el nombre depende de usted y simplemente ejecutaré esto y reenviaré mi valor de estado de entrada y mi estado de entrada es información
válida, de modo que en el componente principal, podemos agregar aquí una función que escuche eso al final, que se activa,
que recibe estos dos argumentos y luego en el padre, por lo que en
el componente de pantalla, podemos actualizar nuestro estado allí. Ahora lo importante es ¿cuándo debería ejecutarse este efecto de
uso y no debería ejecutarse después de cada pulsación de tecla? En cambio, esto debería ejecutarse cada vez que
nuestro valor de estado de entrada o cambios válidos, por supuesto, porque eso es de lo que dependemos o para ser precisos, incluso podríamos enviar esta
información solo si el estado de entrada tocado es verdadero porque de lo contrario el componente padre podría no importar.
Entonces, nuestra dependencia aquí es el estado de entrada completo porque usamos todos los valores, pero solo activaremos esta
función en el componente principal si se toca, por lo que este efecto se ejecutará con
más frecuencia, pero la mayoría de las veces no hará nada mientras tocado no sea cierto y los accesorios, por
supuesto, también sean nuestra dependencia, ahora para evitar un bucle de representación infinito aquí, podemos usar la sintaxis de desestructuración de objetos y
extraer el cambio de entrada, de modo que si otros accesorios cambian, no Refire este efecto porque en el cambio de entrada es lo
que necesitamos allí y ahora podemos agregar que esto es una dependencia y las otras cosas, otros cambios
en los accesorios no desencadenarán esto.
Así que ahora llamamos a esto en el componente primario cada vez que se toca y luego reenviamos el valor y
la validez de esta entrada al componente primario.
Así que ahora usemos eso en la pantalla de edición del producto, allí en nuestras entradas como en la entrada del título, podemos
agregar el accesorio de cambio de entrada y ese es el accesorio al que apunto aquí, así que necesitas acertar ese
nombre y esto espera obtener una función como un valor que, a su vez, recibirá dos
argumentos cuando se llame: el valor y la validez de esa entrada.
Entonces, aquí quiero señalar una función y ese puede ser nuestro controlador de cambio de entrada, digamos, podemos reciclar esto, solo le
cambio el nombre para que sea más adecuado.
Entonces, el controlador de cambio de entrada se puede activar aquí, de esta manera, allí todavía quiero pasar mi identificador porque quiero
reutilizar eso para todas mis entradas y ahora, ya que estoy en el componente
de pantalla, tendremos múltiples entradas y allí , por lo tanto, obtenemos nuestro identificador y luego obtenemos el valor y la información
es válida, ¿verdad?
Entonces, valor de entrada y validez de entrada, eso es lo que obtenemos, correcto, porque eso
es lo que reenviamos desde el componente de entrada aquí, eso
es lo que pasamos a esto
en la función de cambio de entrada. Por lo tanto, aquí, no necesitamos validar, solo necesitamos reenviar esa información. Reenviamos el valor de entrada, reenviamos la validez de
la entrada y esto solo sucederá cuando la entrada se toque por cierto, por lo que cuando pierde el foco y, por supuesto, eso
es
solo una restricción que agregué
aquí, que debes haber perdido el foco, tú por supuesto, también podría ir al componente
de entrada y eliminar esto si marca para actualizar la validez y el valor en el
componente principal para cada entrada, para cada pulsación de tecla. Ahora, una cosa adicional que quiero hacer, quiero envolver esto
en una llamada de devolución de llamada de uso aquí, para que esta función no se reconstruya innecesariamente porque tenga en cuenta que pasamos esta función a
cambio de entrada en el componente de entrada y allí Por otro lado, esta es una dependencia de
este
efecto, por lo que este efecto
se volverá a ejecutar cada vez que esto cambie.
Por lo tanto, no debería cambiar con demasiada frecuencia para evitar ejecuciones de efectos innecesarios
y, por lo tanto, aquí debemos indicar nuestras dependencias y la única dependencia que tenemos es el estado del
formulario de envío que en realidad nunca cambiará,
por
lo que estamos bien, esto nunca debería reconstruirse porque el
La lógica allí no cambia, obtenemos todos los valores que necesitamos como argumentos. Con eso en la pantalla de edición de mi producto, todavía tengo mis formularios que, por supuesto, con todos los valores y las validaciones de los formularios, pero
solo administro esto aquí porque necesito enviarlo más tarde y porque necesito derivar la validez general del formulario. No lo hago porque
necesito administrar cada entrada aquí, lo
hacemos desde dentro del componente de entrada. Para el envío, etc., todavía
necesitamos
la información sobre cada tienda, sin embargo, el valor. Ahora, si vuelvo a la entrada, no olvide que también debe establecer el valor inicial prop
y si esto debería ser inicialmente válido,
por lo que si vuelvo a la pantalla de edición del producto, ahora deberíamos establecer el valor inicial aquí para ¿Qué?
Bueno, podemos verificar si tenemos un producto editado y si lo tenemos, entonces el valor inicial aquí debería
ser editadoProduct. título,
de lo contrario, es una cadena vacía y esto debería ser inicialmente válido, así que use este accesorio aquí
si tenemos un producto
editado, por lo que si
es así, con la doble explosión aquí, si esto es cierto. Si no tenemos un producto editado, entonces esto no puede ser válido
inicialmente,
entonces paso falso, lo cual
es bueno, que es lo que debería ser el caso.
Ahora podemos copiar estas dos líneas, también en imageUrl, allí, por supuesto, reenviamos el valor de URL de
la imagen como valor predeterminado, aparte de eso, puede permanecer así. Por el precio, nunca tendremos un valor inicial
y nunca será inicialmente válido. Para la descripción, por otro lado,
podemos agregar nuevamente esto y aquí señalar la descripción.
Ahora con eso, hay una cosa que necesito arreglar en el componente de entrada que también pensé, por supuesto aquí, el
estado del formulario ya no está disponible, en cambio tenemos nuestro estado interno
aquí y llamé a este estado de entrada, eso es lo que devuelve mi
reductor, por lo que deberíamos usar
eso aquí, por supuesto.
Entonces aquí tenemos inputState. valor como valor, es tan simple como
eso y aquí tenemos inputState. es válido como un cheque y eso debería ser todo.
Ahora, si guardamos esto y miramos esto, veamos si eso funciona. Si vamos aquí, tenemos todos los mensajes de error inicialmente,
lo cual tiene sentido porque todos son inválidos inicialmente, si
empiezo a escribir aquí, obtengo un error, no puedo encontrar la variable isValid en mi componente de entrada, que tiene que
estar en ese controlador que se dispara por cada pulsación de tecla, probablemente aquí, sí, en el reductor, por supuesto,
debería verificar la acción.
isValid, no solo isValid, tengo que
obtener esto de la acción. Entonces, con esa solución
aquí, regresemos e intentemos esto nuevamente. Si empiezo a escribir, esto se borra,
si revierto esto, mi error no regresa, por lo que es un pequeño
error que tendremos que solucionar. Por el precio, 0
no se trata como válido, uno tampoco lo es, por lo
que la validación tiene algunos problemas, pero ingresar,
etc. funciona, pero veamos qué hay de malo en la validación ahora.
Bueno, por supuesto, la forma en que funciona la validación aquí, no la estamos usando.
Tenga en cuenta que siempre verifico si este tipo de validación está habilitada para esta entrada o este tipo o este tipo y lo hacemos
con la ayuda de estos accesorios especiales que necesitamos configurar. En este momento no hay
validación habilitada, por lo que solo se tienen en cuenta los valores no válidos predeterminados.
Entonces, si voy a la pantalla de edición del producto, ahora habilitamos esta validación especial configurando los accesorios
correctos, por ejemplo, aquí en la entrada del título, requerida. En imageUrl, también se requiere. En el precio aquí, requerido y también tal vez
mínimo igual a cero, por lo que cero es el número mínimo que tenemos que ingresar o un número mayor
que
ese en realidad, así que tal vez 0. 1 es nuestro número mínimo. Para la descripción, también debe ser obligatorio y tal vez también longitud
mínima igual a 5, para tener al menos 5 caracteres. También hay una cosa adicional que debemos hacer aquí en la
pantalla de edición del producto, esto en el controlador de cambio de entrada aquí también debe agregarse a cada entrada,
por supuesto, no solo a la entrada del título. Por lo tanto, debemos agregar esto para
imageUrl; de lo contrario, obtendremos un error más tarde, necesitaremos agregar esto aquí a la entrada de precios, también necesitaremos agregar esto aquí obviamente a la entrada
de descripción y reemplazar el identificador En el camino correcto.
Así que vamos a probar esto y notarás
algo extraño, si escribes aquí, funciona, si
escribes en imageUrl, no funciona
bien, la validación no se actualiza y tampoco puedes retroceder, al menos Esto podría estar atascado.
Entonces, si volvemos a cargar esto con un error de comando o presionando dos veces R en
Android y le damos otra oportunidad aquí, digamos sobre el precio, notará que
esto funciona, pero ¿por qué no funciona? si lo probaste
en imageUrl, aquí funciona. ¿Por qué funciona si previamente edité otra entrada
porque ahora, por ejemplo, ya no funciona en un título? Y el problema está relacionado con que esto esté atascado aquí.
Estamos volviendo a utilizar este componente con demasiada frecuencia y la razón es muy difícil de rastrear.
Al final, tenemos una especie de bucle infinito
aquí y el problema es nuestro controlador de cambio de entrada.
Estamos usando la devolución de llamada aquí para evitar recreaciones innecesarias, pero al vincularlo de esta manera,
lo volvemos obsoleto, ahora no hay diferencia porque esto creará una nueva función vinculante para cada
ciclo de devolución.
Entonces, al final, lo que tenemos que hacer es eliminar el enlace aquí, eliminarlo aquí en todos estos lugares porque
esto romperá nuestra aplicación,
causará demasiados ciclos de devolución debido a que el uso de la devolución de llamada
no tiene efecto y en su lugar podríamos desea reenviar un
accesorio de identificación de título y así sucesivamente a nuestro componente de entrada.
Así que agreguemos esto en todas estas entradas, este accesorio de ID es básicamente lo que agregué en la llamada de enlace anterior, por lo
que simplemente reenviamos esto al componente de entrada para que podamos usarlo allí, hagamos
esto para todas estas entradas aquí y ahora, ¿cómo podemos usar eso?
Bien dentro de la entrada, ahora tenemos este accesorio de identificación
disponible, así que simplemente podemos adjuntar esto.
Entonces aquí podemos enviar accesorios. ID o simplemente ID para que no tengamos que agregar accesorios aquí y
en su lugar extraer ID de los accesorios aquí tal como lo hicimos con el cambio de entrada y agregar ID
como una dependencia de este efecto a partir de entonces. Y ahora con eso, todavía reenviamos el identificador
de esta entrada, pero de una manera más elegante que evita usar el enlace, que
al final recrea esta función para cada ciclo de renderizado
y, por lo tanto, conduce a un bucle infinito y, por lo tanto, ahora
si volvemos a cargar esto y nosotros vaya a la sección de administración aquí, ahora puedo ingresar algo aquí y también aquí y ahora esto funciona porque
ahora evitamos este ciclo de renderizado infinito y obtenemos la validación como queríamos.
Entonces, este es mi enfoque o este es el enfoque que quería mostrarle aquí, que puede usar para tener un
componente de entrada reutilizable que haga su propia validación, que puede configurar desde el exterior y donde
aún puede administrar el formulario general.
Con eso, profundicemos en algunos ajustes,
como por ejemplo diseñar este mensaje de error que estamos mostrando, este mensaje de error de validación y también
controlar cuándo lo mostramos porque no quiero mostrarlo todo el tiempo.