Estamos usando el marco ReactJS, por lo que no encontramos elementos escritos en todo el código. La única forma es encontrar el elemento DOM y debe establecer el atributo. Estoy haciendo esto en app.js.
setTimeout(function () { const formElement = document.getElementsByTagName('form') formElement.item(0).setAttribute('autocomplete', 'off') }, 1000)La solución anterior funciona bien, pero si la carga de la página es lenta, esto no establecerá el atributo. ¿Hay alguna otra forma de encontrar el elemento y establecer el atributo? También intenté configurarlo usando el siguiente código después de DOMContentLoaded, pero no funciona. Nada dentro de este evento está funcionando.
document.addEventListener('DOMContentLoaded', () => { const formElement = document.getElementsByTagName('form') formElement.item(0).setAttribute('autocomplete', 'off') })En React, una buena manera de acceder a los elementos DOM es mediante el gancho useRef . Sin embargo, si ese elemento que desea consultar no está en el JSX de su componente actual, el enlace useEffect podría usarse con los métodos DOM de JavaScript normales. Al igual que:
useEffect(()=>{ const formElement = document.getElementsByTagName('form') formElement.item(0).setAttribute('autocomplete', 'off') },[]);No encuentra el elemento porque 'DOMContentLoaded' se activa cuando el archivo HTML completa la carga, no cuando React representa el formulario.
¿Qué tal usar MutationObserver en su lugar? https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
También hacer eso en el nivel raíz app.js suena mal. ¿Puedes hacerlo en el componente que está más cerca del contenedor del formulario?