尝试执行Recaptcha

问题描述

我试图将此https://react-hook-form.com/get-started npm软件包与gatsby中的此软件包https://www.npmjs.com/package/react-google-recaptcha一起使用并做出反应。我想使用不可见的Recaptcha，它看起来像我必须通过创建react ref来执行的Recaptcha一样，但是它说rec.current为null，不引用确定该怎么做。 onSubmit函数是我得到空结果的地方，我假设我可以在此处触发验证码，然后取回验证码值，以后再在我的lambda函数中发送给Google进行验证。

提前谢谢

到目前为止，这是我的代码

import React,{ useState } from "react"
import Layout from "../components/layout"
import Img from "gatsby-image"
import { graphql,Link } from "gatsby"
import { CartItems } from "../components/cart"
import { useForm } from "react-hook-form"
import ReCAPTCHA from "react-google-recaptcha"

const StoreDetails = ({ data }) => {
  const { register,handleSubmit,watch,errors } = useForm()

  const recaptchaRef = React.createRef()

  const onSubmit = data => {
    console.log(recaptchaRef)
    recaptchaRef.current.execute() //this shows up null
  }


  function onChange(value) {
    console.log("Captcha value:",value)
  }

  function error(value) {
    alert(value)
  }

  return (
    <>
      {data.allSanityProducts.edges.map(({ node: product },i) => {
        return (
          <React.Fragment key={i}>
            <Item>
              <Img
                fluid={product.featureImage && product.featureImage.asset.fluid}
              />
              <div>
               ...
                <form onSubmit={handleSubmit(onSubmit)}>
                  {/* register your input into the hook by invoking the "register" function */}
                  <input name="example" defaultValue="test" ref={register} />

                  {/* include validation with required or other standard HTML validation rules */}
                  <input
                    name="examplerequired"
                    ref={register({ required: true })}
                  />
                  {/* errors will return when field validation fails  */}
                  {errors.examplerequired && (
                    <span>This field is required</span>
                  )}
                  <ReCAPTCHA
                    className="captchaStyle"
                    sitekey="obsf"
                    onChange={onChange}
                    onErrored={error}
                    badge={"bottomright"}
                    size={"invisible"}
                    ref={recaptchaRef}
                  />
                  <input type="submit" />
                </form>
              </div>
            </Item>
          </React.Fragment>
        )
      })}
      {close && <CartItems />}
    </>
  )
}

const WithLayout = Component => {
  return props => (
    <>
      <Layout>
        <Component {...props} />
      </Layout>
      ...
    </>
  )
}

export default WithLayout(StoreDetails)

export const query = graphql`
  query StoreDeatailsQuery($slug: String!) {
    ...
  }
`

解决方法

您永远不会在引用中填充任何值。最初在以下位置设置为空：

  const recaptchaRef = React.createRef()

您必须等待Google响应为recaptchaRef填充一个值。换句话说，您需要使用基于承诺的方法来使用executeAsync()和async函数来填充它：

  const onSubmit = async (data) => {
    const yourValue = await recaptchaRef.current.executeAsync();

    console.log(yourValue)
  }

您可以查看有关react-google-recaptcha documentation中公开的props的更多详细信息。