Почему обратный вызов не срабатывает при нажатии кнопки? - PullRequest
Новая
       17

Почему обратный вызов не срабатывает при нажатии кнопки?

0 голосов
/ 27 июня 2019

Я использую реагирующий npm с именем react-facebook-login для создания кнопки входа в систему. Проблема в том, что обратный вызов компонента кнопки ничего не возвращает.

Это компонент кнопки, в котором я нахожусьсоздание кнопки 

import React, {Component} from 'react';
import FacebookLogin from 'react-facebook-login'

export default class Facebook extends Component {


    state = {
        isLoggedin: false,
        userID: '',
        name: '',
        email: '',
        picture: ''
    }

    responseFacebook = response => {
        console.log(response);
    }

    componentClicked = () => console.log("clicked");


    render() {
        let fbContent;

        if(this.state.isLoggedin){
            fbContent =null;
        }
        else {
          console.log("test");
          fbContent = (
          <FacebookLogin
          appId="xxxxxxx"
          autoLoad={true}
          fields="name,email,picture"
          onClick={this.componentClicked}
          callback={this.responseFacebook} />)  
        }


        return <div>{fbContent}</div>

    }


}

Событие onClick работает, обратный вызов не работает.

* Обратите внимание, что я цензурировал appId его правильность в моем коде.

1 Ответ

0 голосов
/ 27 июня 2019

Это должен быть ваш код при работе с функциональным компонентом, 

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login';

const responseFacebook = (response) => {
  console.log(response);
}

const componentClicked = () => console.log("clicked");

ReactDOM.render(
  <FacebookLogin
    appId="xxxxxxxxxx"
    autoLoad={true}
    fields="name,email,picture"
    onClick={componentClicked}
    callback={responseFacebook} />,
  document.getElementById('demo')
);

При работе с компонентом класса 

import React from 'react';
import FacebookLogin from 'react-facebook-login';

class MyComponent extends React.Component {
  responseFacebook(response) {
    console.log(response)
  }

  componentClicked(){
     console.log("clicked");
  }

  render() {
    return (
      <FacebookLogin
        appId="1088597931155576"
        autoLoad={true}
        fields="name,email,picture"
        onClick={componentClicked}
        callback={this.responseFacebook}
      />
    )
  }
}

export default MyComponent;

Ref .

Также отметьте это - Справочник по разрешениям - Facebook Login

Обновление

Не делай этого, 

export default class Facebook extends Component {...} //dont export your component on same line

Вместо этого вы должны сделать это, 

class Facebook extends Component {...}

export default Facebook
...