facebook按钮不调用onClick（） - reactJS答案

【问题标题】：onClick() not called for facebook button - reactJSfacebook按钮不调用onClick（） - reactJS
【发布时间】：2018-12-09 19:14:31
【问题描述】：

由于某种原因，我的 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 auth 并直接处理 facebook auth。这是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);

注意绑定并订阅 auth.statusChange。

由于这个订阅事件，我也不需要添加data-onlogin。

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

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

【问题讨论】：

您应该将后续问题作为新问题发布。

标签： javascript reactjs facebook onclick

【解决方案1】：

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

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

【讨论】：

谢谢@luschn 我会这样做的