Question

我正在尝试为每个表单提交集成Recaptcha，但是当我提交表单时。它不要求我做任何挑战，只需将表单提交到后端。它甚至没有控制台记录响应。不知道出了什么问题。我正在关注npm react-recaptcha的文档这是我的代码：

import React         from 'react'
import Link          from 'gatsby-link'

import Recaptcha from 'react-recaptcha'
let recaptchaInstance

// manually trigger reCAPTCHA execution
const executeCaptcha = function () {
  if(typeof recaptchaInstance !== "undefined") recaptchaInstance.execute();
};

// executed once the captcha has been verified
// can be used to post forms, redirect, etc.
const verifyCallback = function (response) {
  if(response) console.log(response);
  if(typeof document !== "undefined") document.getElementById("mc-embedded-subscribe-form").submit();
};

const FeatureSection = () => (
  <section id="features" className="services">
    <div className="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1 text-center zoomIn">
      <h1> Subscribe </h1>
      <p>Subscribe to our newsletter for updates on beta testing and our release date</p>
      <div id="mc_embed_signup" className="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1">
        <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" className="validate" noValidate="">
          <div id="mc_embed_signup_scroll">
            <div className="input-group mb-2 mr-sm-2">
              <input type="email" name="EMAIL" className="email input-design" id="mce-EMAIL" placeholder="Email" required=""/>
              <div className="input-group-prepend">
                <button
                  className="button btn btn-primary outline-border"
                  onClick={executeCaptcha()}
                  name="subscribe" id="mc-embedded-subscribe"
                >  
                  Subscribe
                </button>
                <Recaptcha
                  ref={e => recaptchaInstance = e}
                  sitekey="#"
                  size="invisible"
                  verifyCallback={verifyCallback()}
                />
              </div>
              <div style={{position: 'absolute', left: '-5000px'}}>
                <input type="text" name="b_da3bf8ffdaa03eca459e75bdb_0d661a5094" tabIndex="-1" value=""/>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>
)

export default FeatureSection

提交表单时没有重新输入提示

0 个答案: