Cómo solucioné un problema con el estado de un formulario de inicio de sesión de React y el autocompletado del navegador

Me encontré con un problema mientras trabajaba en un proyecto: había creado un formulario con React y cómo el autocompletado del navegador interactuaba con él.

¿Sabes cuando el navegador coloca tu nombre de usuario y contraseña automáticamente porque ya los escribiste en el pasado?

Se trata del autocompletado y esa es la causa de mi problema. En particular, lo he replicado en Chrome y Firefox, pero cualquier navegador puede tener este problema.

La forma era una forma usual y sencilla construida con el useStategancho.

A continuación se muestra un emailcampo de ejemplo del formulario:

import { useState } from 'react'//...const [email, setEmail] = useState('')

input id='email' type='email' name='email' value={email} onChange={(event) = setEmail(event.target.value)} /

Cuando escribe el correo electrónico allí, el emailvalor se actualiza setEmaily lo tendré disponible en el evento de envío del formulario, para poder enviarlo al servidor.

En algún momento me di cuenta de que el navegador estaba completando automáticamente el correo electrónico y la contraseña, ¡pero React no lo reconoció!

Tal vez porque llena el campo antes de que React se ejecute por completo, por lo que no puede interceptar ese evento.

Investigé un poco y me perdí en un mundo de inconsistencias del navegador y diferencias en cómo funciona el autocompletado, así que tuve que crear una solución simple.

Lo hice usando useRefy useEffect:

import { useState, useEffect, useRef } from 'react'

Creo una referencia:

const emailField = useRef(null)

y en el JSX lo adjunto al campo de entrada:

input ref={emailField} id='email' type='email' name='email' value={email} onChange={(event) = setEmail(event.target.value)} /

Luego agregué un fragmento de código que cada 100 ms busca el valor del campo y llama setEmail()para actualizarlo:

useEffect(() = { let interval = setInterval(() = { if (emailField.current) { setEmail(emailField.current.value) //do the same for all autofilled fields clearInterval(interval) } }, 100)})

No es ideal, implica manipulación del DOM, algo que debemos evitar al usar una biblioteca como React, pero soluciona este problema.

¿Qué sucede si no hay relleno automático? Esto simplemente esperará hasta que se escriba el primer carácter y detendrá el bucle.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Cómo solucioné un problema con el estado de un formulario de inicio de sesión de React y el autocompletado del navegador

Me encontré con un problema mientras trabajaba en un proyecto: había creado un formulario con React y cómo el autocompletado del navegador interactuaba con

programar

es

2025-01-06

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente