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

Question

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

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

目前我的CSS类没有被删除，这不允许表单提交。我的console.logyes正在出现，因此该函数正在被调用，但我无法删除CSS类。这种方法以前使用常规javascript工作，现在我试图在nextjs上做同样的事情。我怎样才能删除我的CSS类对成功的reCAPTCHA?

下面是我的代码片段:

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

现在应该可以工作了。