Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

280
Vistas
Eliminar la clase css del elemento cuando reCAPTCHA es exitoso - Nextjs

Estoy intentando eliminar una clase css btn-disabled del elemento del botón de entrada cuando alguien verifica su entrada al formulario.

Actualmente creé una función llamada enableForm para eliminar la clase CSS btn-disabled cuando se verifica reCAPTCHA.

Por el momento, mi clase de CSS no se elimina, lo que no permite que se envíe el formulario. Aparece mi console.log yes , por lo que se llama a la función, pero no puedo eliminar la clase CSS. Este método funcionaba anteriormente usando javascript regular ahora estoy intentando hacer lo mismo en nextjs. ¿Cómo puedo eliminar mi clase de CSS con el éxito de reCAPTCHA?

Aquí está mi fragmento de código:

 import ReCAPTCHA from "react-google-recaptcha"; const TopForm = () => { const enableForm = function () { console.log('yes') document.getElementById("btnSubmit").classList.remove = "btn-disabled"; }; return ( <div> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="First Name*" className="field" /> <br /> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="Last Name*" className="field" /> <ReCAPTCHA sitekey="XXXXXX" onChange={enableForm} /> <input id="btnSubmit" type="submit" name="submit" className="btn-disabled btn-alternative width-inherit margin-left-0 " /> </div> ) }

btn-disabled tiene propiedades CSS de:

 .btn-disabled {cursor:not-allowed;opacity:0.5;text-decoration:none;pointer-events: none;}
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Puedes administrar de mejor manera las clases en base al valor de tu estado

 import ReCAPTCHA from "react-google-recaptcha"; const TopForm = () => { const [isActive, setIsActive] = useState(false); const enableForm = function () { console.log('yes') setIsActive(true) }; return ( <div> <input id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="First Name*" className="field" /> <br /> <input id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="Last Name*" className="field" /> <ReCAPTCHA sitekey="XXXXXX" onChange={enableForm} /> <input id="btnSubmit" type="submit" name="submit" className={`constant1 ${isActive ? "active" : ""} btn-alternative width-inherit margin-left-0`} /> </div> )
about 4 years ago · Juan Pablo Isaza Denunciar

0

En su función, accidentalmente cometió el error de asignar una función en lugar de llamarla.

Esto es lo que debería ser:

 const enableForm = function () { console.log('yes') document.getElementById("btnSubmit").classList.remove("btn-disabled"); };

Debería funcionar ahora.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda