En la penúltima etiqueta div con id = "g_id_onload" si asigno una función al atributo data-callback , reaccionar da una advertencia:
Advertencia: valor no válido para
data-callbackprop en la etiqueta div. Elimínelo del elemento o pase una cadena o un valor numérico para mantenerlo en el DOM
Además, nunca se llama data-callback . ¿Alguien sabe lo que está mal con esto.
class Login extends React.Component{ handleCredentialResponse = (response)=>{ console.log(response.credentials); } render(){ return ( <div className="login"> <div className="text-center mb-2"> <img src="http://placehold.it/60" alt="Sign in"/> </div> <form> <div className="text-center h3 mb-3">Sign in</div> <div className="mb-3"> <label className="form-label">Email address</label> <input type="email" className="form-control" /> </div> <div className="mb-3"> <label className="form-label">Password</label> <input type="password" className="form-control"/> </div> <div className="text-center mb-3"> <button type="submit" className="btn btn-primary">Sign in</button> </div> </form> <div className="mb-3 text-center form-text div_or">Or</div> <div className="google_signin_row"> <div className="google_signin_col"> <div id="g_id_onload" data-client_id="CLIENT_ID" data-callback={(res)=>this.handleCredentialResponse(res)}> </div> <div className="g_id_signin" data-type="standard" data-theme="filled_blue" data-width="250"></div> </div> </div> </div> ); } }Encontré la solución aquí: https://github.com/google/recaptcha/issues/74
resumen:
El atributo de devolución de llamada de datos espera una cadena que defina el nombre de la función en el espacio de nombres global que debe activarse. No puede definir la función dentro del atributo.
Entonces, definir la función handleCredentialResponse en el espacio de nombres global y poner data-callback = "handleCredentialResponse" funciona.
manera alternativa:
class Login extends React.Component{ constructor(props) { super(props); window.handleCredentialResponse = this.handleCredentialResponse; } handleCredentialResponse(response){ console.log(response); } render(){ return <div className="g_id_onload" data-callback="handleCredentialResponse" /> } }No puede pasar una función a un atributo de datos personalizado. Intente usar un controlador de eventos como onClick, onSubmit, onChange, etc.