Next.js中reCAPTCHA验证成功后如何移除元素的CSS类

核心问题原因 #

你代码中classList.remove的调用方式存在语法错误：classList.remove是DOM元素提供的实例方法，需要以函数调用形式传入要移除的类名，你当前的写法是把remove方法直接覆盖为了字符串，自然无法生效。

方案1：直接修复现有写法 #

仅修改enableForm函数内的classList.remove调用逻辑即可：

const enableForm = function () {
  console.log('yes')
  // 改为方法调用，传入要移除的类名
  document.getElementById("btnSubmit").classList.remove("btn-disabled");
};

方案2：更符合React/Next.js规范的实现（推荐） #

React框架不推荐直接操作原生DOM，更建议通过状态驱动视图更新，避免虚拟DOM和真实DOM状态不一致的问题，完整实现代码如下：

import ReCAPTCHA from "react-google-recaptcha";
import { useState } from "react";

const TopForm = () => {
  // 初始化提交按钮为禁用状态
  const [isBtnDisabled, setIsBtnDisabled] = useState(true);

  const enableForm = function () {
    console.log('yes')
    // reCAPTCHA验证通过后修改状态
    setIsBtnDisabled(false);
  };

  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，根据状态控制是否添加禁用类 */}
        className={`${isBtnDisabled ? 'btn-disabled' : ''} btn-alternative width-inherit margin-left-0`}
      />
    </div>
  )
}

内容的提问来源于stack exchange，提问作者kurtixl