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;}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> )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.