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

Posted 2023-03-06

【中文标题】reCAPTCHA 成功时从元素中删除 css 类 - Nextjs

【英文标题】：Remove css class from element when reCAPTCHA is successful - 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;

【参考方案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";

请注意这是一种反模式反应