reCAPTCHA 成功时从元素中删除 css 类 - Nextjs答案

【问题标题】：Remove css class from element when reCAPTCHA is successful - NextjsreCAPTCHA 成功时从元素中删除 css 类 - Nextjs
【发布时间】：2021-11-30 15:11:30
【问题描述】：

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

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

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

这是我的代码 sn-p：

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

【问题讨论】：

标签： javascript html css reactjs next.js

【解决方案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>
)

【讨论】：

【解决方案2】：

在您的函数中，您不小心犯了分配函数而不是调用它的错误。

应该是这样的：

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

它现在应该可以工作了。

【讨论】：

您能详细说明一下吗？这解决了问题，但您的代码看起来与我眼中的完全一样
我看它不应该是 = "btn-disabled";
请注意这是一种反模式反应