0

一旦用户单击它，我正在尝试提升 reCAPTCHA 的值（使用react-google-recaptcha ）。我可以轻松获取该值，但无法将其发送到父组件。它抛出：

未捕获（承诺）：空

const RecaptchaInput = ({ name, isValid, errorMessage, onChange }) => {
  const recaptchaReference = useRef(null);

  const handleChange = () => {
    let recaptchaValue = recaptchaReference.current.getValue(); 
    console.log('recaptchaValue',recaptchaValue) //prompts the value

    onChange({ value: recaptchaValue, name: `recaptcha` });
  };

  return <div>
    <label htmlFor={name}>
      <Recaptcha sitekey={process.env.GATSBY_SITE_RECAPTCHA_KEY}
                 ref={recaptchaReference}
                 onChange={handleChange} />
    </label>
    {!isValid && <small>{errorMessage}</small>}
  </div>;
};

该值已在控制台中正确提示，但我无法发送它onChange功能。既不是像{value: 'hello', name: 'recaptcha'}.

我的onChange函数将参数解构为nameand value，这就是我举起这样一个对象的原因。

据我所知，它似乎与 Google 的 Recaptcha 的回调有关，但我不知道如何在 Gatsby/React 应用程序中绕过它。

4

1 回答 1

0

经过数小时的反复试验，我通过进行基于async承诺的值获取来修复它。对于可能陷入类似问题的每个人：

const RecaptchaInput = ({ name, isValid, errorMessage, onChange }) => {
  const recaptchaReference = useRef(null);

  const handleChange = async () => {
    let recaptchaValue = recaptchaReference.current.getValue(); 
    console.log('recaptchaValue',recaptchaValue) //prompts the value

    onChange({ value: recaptchaValue, name: `recaptcha` });
  };

  return <div>
    <label htmlFor={name}>
      <Recaptcha sitekey={process.env.GATSBY_SITE_RECAPTCHA_KEY}
                 ref={recaptchaReference}
                 onChange={handleChange} />
    </label>
    {!isValid && <small>{errorMessage}</small>}
  </div>;
};
于 2020-07-25T20:23:15.707 回答