javascript - facebook 按钮不调用 onClick() - ReactJS

Question

由于某种原因，我的 onClick 处理程序无法与 facebook 按钮一起使用(位于 https://developers.facebook.com/docs/facebook-login/web/login-button/ )。但它可以与通用 div 一起使用。

知道为什么 Facebook 按钮(第二个 div)上没有调用 onClick 吗？

<div onClick={this._handleFBLogin}>Facebook Login (working)</div>
<div onClick={this._handleFBLogin} 
   className="fb-login-button" 
   data-max-rows="1" 
   data-size="large" 
   data-button-type="continue_with" 
   data-show-faces="false" 
   data-auto-logout-link="false" 
   data-use-continue-as="false" />

症状:

onClick() 甚至从未被调用。

编辑:跟进

基于@luschn的回复以及其他一些问题(特别是:Implement Facebook API login with reactjs)

我必须绕过我的 _handleFBLogin() 函数，该函数调用一个函数来处理 facebook 身份验证并直接处理 facebook 身份验证。以下是componentDidMount()中的相关代码:

        const facebookCallback = (response) => {
            return this._facebookCallback(response)
        }
        window.fbAsyncInit = function() {
            FB.init({
                appId      : FACEBOOK_APP_ID,
                cookie     : true,  // enable cookies to allow the server to access the session
                version    : FACEBOOK_API_VERSION
            });

            FB.Event.subscribe('auth.statusChange', function(response) {
                facebookCallback(response)
            });
        }.bind(this);

记下绑定(bind)并订阅 auth.statusChange。

此外，由于此订阅事件，我不需要添加data-onlogin。

最后，我原来的 _handleFBLogin 代码是:

_handleFBLogin = () => {
        FB.login(response => {
            this._facebookCallback(response)
        }, {scope: 'public_profile,email'})
    }

Answer 1

您必须改用 onlogin 参数/属性，如文档中所述。或者，您可以使用自己的自定义按钮:https://developers.facebook.com/docs/reference/javascript/FB.login/

使用您自己的 onClick 方法无论如何都是毫无意义的，因为按钮插件会为您处理登录。