当reCAPTCHA成功时从元素中移除css类- Nextjs

Question

当有人验证他们在表单中的输入时，我试图从输入按钮元素中删除一个css类btn-disabled。

我目前创建了一个名为enableForm的函数，用于在验证reCAPTCHA时删除CSS类btn-disabled。

目前，我的CSS类没有被删除，这不允许表单提交。我的console.log yes出现了，所以函数正在被调用，但我无法删除CSS类。这个方法以前是用普通的javascript来工作的，现在我正尝试在nextjs上做同样的事情。如何在reCAPTCHA成功后删除我的CSS类？

下面是我的代码片段：

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的CSS属性为：

.btn-disabled {cursor:not-allowed;opacity:0.5;text-decoration:none;pointer-events: none;}

Answer 1

您可以根据状态的值以更好的方式管理类

        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>
)

Answer 2

在您的函数中，您意外地犯了分配函数而不是调用函数的错误。

它应该是这样的：

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

它现在应该可以工作了。