Necesito agregar esta contraseña archivada en mi aplicación React, pero hay un error de eventListener, ¿cómo puedo resolverlo?
(Enlace de lápiz de código: https://codepen.io/huphtur/pen/OKJJQY )
HTML (Este es el archivo de código HTML)
<body class="bg-indigo-100"> <form class="p-4 max-w-md mx-auto bg-white border-t-8 border-indigo-700 mt-10 rounded"> <h1 class="font-medium text-3xl text-center py-4 text-gray-800">Sign in to App</h1> <label class="font-medium block mb-1 mt-6 text-gray-700" for="username"> Username or Email </label> <input class="appearance-none border-2 rounded w-full py-3 px-3 leading-tight border-gray-300 bg-gray-100 focus:outline-none focus:border-indigo-700 focus:bg-white text-gray-700 pr-16 font-mono" id="username" type="text" autocomplete="off" autofocus /> <label class="font-medium block mb-1 mt-6 text-gray-700" for="password"> Password </label> <div class="relative w-full"> <div class="absolute inset-y-0 right-0 flex items-center px-2"> <input class="hidden js-password-toggle" id="toggle" type="checkbox" /> <label class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer js-password-label" for="toggle">show</label> </div> <input class="appearance-none border-2 rounded w-full py-3 px-3 leading-tight border-gray-300 bg-gray-100 focus:outline-none focus:border-indigo-700 focus:bg-white text-gray-700 pr-16 font-mono js-password" id="password" type="password" autocomplete="off" /> </div> <button class="w-full bg-indigo-700 hover:bg-indigo-900 text-white font-medium py-3 px-4 mt-10 rounded focus:outline-none focus:shadow-outline" type="button"> Sign in </button> </form> </body>Js Este es el código js
const passwordToggle = document.querySelector('.js-password-toggle') passwordToggle.addEventListener('change', function() { const password = document.querySelector('.js-password'), passwordLabel = document.querySelector('.js-password-label') if (password.type === 'password') { password.type = 'text' passwordLabel.innerHTML = 'hide' } else { password.type = 'password' passwordLabel.innerHTML = 'show' } password.focus() })Use su código JS cuando el componenteDidMount, para esto necesitará el gancho useEffect
ejemplo:
useEffect(() => { const passwordToggle = document.querySelector('.js-password-toggle') passwordToggle.addEventListener('change', function() { const password = document.querySelector('.js-password'), passwordLabel = document.querySelector('.js-password-label') if (password.type === 'password') { password.type = 'text' passwordLabel.innerHTML = 'hide' } else { password.type = 'password' passwordLabel.innerHTML = 'show' } password.focus() }) }, [])