Estoy usando el paquete npm react-google-recaptcha para la implementación de la casilla de verificación google recaptcha v2 en mi página de formulario del sitio web
<ReCAPTCHA sitekey={KEY} onChange={this.captchaOnChange} />una vez que se verifica el captcha, estoy activando la función captchaOnChange para registrar la respuesta de las API de Google y establecer el valor de activación verdadero, que se usa más en mi código (he probado varias versiones del código a continuación con una solo con asíncrono, otra sin asíncrono y uno con asíncrono y espera)
captchaOnChange = async (value) => { this.setState({ captchaValue: value, clicked: true, }); };Y una vez que se envía el formulario, estoy usando
window.grecaptcha.reset()para restablecer el recaptcha
Ahora, el problema es que cuando el usuario hace clic en el recaptcha por primera vez, funciona bien y al instante se ve la marca verde en el recaptcha, pero después de enviar el formulario, cuando se restablece el captcha y el usuario quiere enviar el formulario una vez más y hace clic en el recaptcha, hay no hay marca verde , se está cargando continuamente como si estuviera atrapado en algún bucle y también estoy revisando en la pestaña de red de elementos de inspección que no se envía ninguna solicitud a ninguna API de recaptcha mientras se está cargando.
Por lo tanto, dudo que haya algún problema con el evento onChange después de usar recaptcha.reset() . También encontré que algunas personas en Internet informan un problema similar, pero no estoy seguro de si se trata de algún problema o de nuestro problema de implementación.
¡¡Por favor ayuda!!
úsalo con referencia
import ReCAPTCHA from "react-google-recaptcha"; const ReCAPTCHAForm = (props) => { const recaptchaRef = React.useRef(); const onSubmitWithReCAPTCHA = async () => { const token = await recaptchaRef.current.executeAsync(); // apply to form data // reset the captcha recaptchaRef.current.reset() } return ( <form onSubmit={onSubmitWithReCAPTCHA}> <ReCAPTCHA ref={recaptchaRef} size="invisible" sitekey="Your client site key" /> </form> ) } ReactDOM.render( <ReCAPTCHAForm />, document.body );más información en documentos del paquete