ReCaptcha 2.0：验证成功后回调启用提交按钮失败问题

你遇到的核心问题是：React组件内的enableSubmit是局部函数，不在全局window作用域中，而Google reCAPTCHA的data-callback会从全局window对象查找指定函数，因此会提示找不到该函数。

方法一：将回调函数挂载到全局window对象 #

把enableSubmit挂载到全局作用域，同时在组件卸载时清理，避免全局污染：

import React, { useEffect } from 'react';

const CaptchaForm = () => {
  function enableSubmit() {
    const submitButton = document.getElementById('submit-button');
    submitButton.removeAttribute('disabled');
  }

  useEffect(() => {
    // 将函数挂载到全局window对象
    window.enableSubmit = enableSubmit;
    // 组件卸载时移除全局函数，避免内存泄漏
    return () => {
      delete window.enableSubmit;
    };
  }, []);

  return (
    <>
      <form method="POST">
        <div
          className="g-recaptcha"
          data-sitekey="SITEKEY"
          data-callback="enableSubmit"
        ></div>
        <button type={'submit'} id="submit-button" disabled>
          Submit
        </button>
      </form>
    </>
  );
};

注意：React组件不要直接返回<head>和<body>标签，这些属于HTML模板的根内容，组件只需渲染页面局部元素即可。

方法二：使用react-google-recaptcha组件（推荐，符合React规范） #

你已经导入了该组件，直接利用它的onChange回调，结合React状态控制按钮禁用状态，避免直接操作DOM：

import React, { useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

const CaptchaForm = () => {
  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);

  const handleCaptchaVerify = () => {
    // 验证通过后启用按钮
    setIsSubmitDisabled(false);
  };

  return (
    <form method="POST">
      <ReCAPTCHA
        sitekey="SITEKEY"
        onChange={handleCaptchaVerify}
      />
      <button type={'submit'} disabled={isSubmitDisabled}>
        Submit
      </button>
    </form>
  );
};

这种方式完全遵循React的状态管理逻辑，不需要操作DOM，也不会出现全局函数找不到的问题。

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