尝试执行 recaptcha 时，ref.current 在 gatsby react 应用程序中为 null

Question

我正在尝试在 gatsby 中使用这个 https://react-hook-form.com/get-started npm package with this package 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!) {
    ...
  }
`

Answer 1

您从未使用任何值填充引用。初始设置为空：

  const recaptchaRef = React.createRef()

您必须等待 Google 响应用值填充 recaptchaRef。换句话说，您需要使用 promise-based 方法使用 executeAsync() 和 async 函数来填充它：

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

    console.log(yourValue)
  }

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