экспортировать функцию javascript с помощью React

Я пытаюсь сделать вход в facebook для веб-сайта. То, что я публикую, представляет собой сегмент js-файла с функцией рендеринга, которая возвращает этот html-код:

var hellojs = require('./hello.js');

// See what hello.js does: http://adodson.com/hello.js/demos/profile.html#helloapi-me-
//It basically prompts the facebook window to sign up. 
var React = require('react');

var provide rs = {
facebook : 'XXXXXXXXXXXXXXX',
twitter  : 'XXXXXXXXXXXXXXX',//I have registered my app, XX.. is just for privacy. 
google   : 'XXXXXXXXXXXXXXX'
};
//LISTENER FOR LOGIN

hellojs.hello.on('auth.login',function(auth){
    hellojs.hello(auth.network).api('/me').then(function(response){
    var object = {};
    debugger;
    if (auth.network === 'twitter' || auth.network === 'facebook'){
        object.username = response.name;
        object.providerId = response.id.toString();
        object.thumbnail = response.thumbnail;
    }
    object.providerType = auth.network;
    sessionActions.authenticated(object);
   });
});
/*Sign Up component*/
login: function(event){
    var object = {};
    var provider = event.currentTarget.name;
    object[provider] = providers[provider];

    hellojs.hello.init(object,{
        'redirect_uri' : 'localhost',
        'oauth_proxy'  : 'https://auth-server.herokuapp.com/proxy',
        scope: 'publish_actions'
    });
    hellojs.hello.login(provider);
},
render: function() {
    .....
    return (
        <div className="signup col-sm-4">
            <form className="form-horizontal" role="form" id="login-form">
                .....
                <div className="form-group">
                    <div className="col-sm-offset-2">
                        <button onClick={this.login} 
                        class='zocial facebook'>Sign in with Facebook</button> 
                    </div>      
                </div>
            </form>
        </div>
    );

Когда я компилирую и нажимаю кнопку «Войти через Facebook», ничего не происходит. Я немного запутался, потому что попробовал со следующим простым html-файлом, и он отлично сработал:

<script> src='hello.js'></script>
<button onClick="{this.login}">Sign in with Facebook</button>

reactjs node.js javascript html node-modules
person regina_fallangi    schedule 13.03.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я думаю, у вас проблема с корпусом. Измените onclick на onClick. JSX превращается в javascript, поэтому регистр имеет значение.

Это по-прежнему может не работать, поскольку hello не находится в глобальной области видимости, и это может потребоваться для выполнения из элементов HTML. Вместо этого добавьте в свой компонент метод, который вызывает hello.hello().

doLogin: function() {
    hello.hello('facebook').login()
},
render: function() {
    .....
    return (
        <div className="signup col-sm-4">
            <form className="form-horizontal" role="form" id="login-form">
                .....
                <div className="form-group">
                    <div className="col-sm-offset-2">
                        <button onClick={this.doLogin} 
                        class='zocial facebook'>Sign in with Facebook</button> 
                    </div>      
                </div>
            </form>
        </div>
    );
person Sean Adkinson    schedule 13.03.2015
comment
Привет, Шон, я реализовал твое предложение, но оно все еще не работает. На самом деле, он даже не будет взиматься, если я не удалю LOGIN LISTENER. Я был бы очень признателен, если бы вы могли взглянуть на него как-нибудь. Спасибо! - person regina_fallangi; 17.03.2015
comment
Глядя на ваш обновленный вопрос, похоже, что вы заключили {this.login} в кавычки, что неверно. Окружение его кавычками будет интерпретировать его как строку, когда вы действительно хотите, чтобы это была ссылка на функцию javascript. Измените onClick="{this.login}" на onClick={this.login}, и функция должна вызываться по клику. - person Sean Adkinson; 17.03.2015
comment
Я ошибся с копипастом. Исходный код не был заключен в кавычки, но он по-прежнему ничего не делает. Спасибо за вашу помощь. - person regina_fallangi; 17.03.2015
comment
Вы говорите, что если вы поместите точку останова прямо внутри своей функции login, она никогда не сработает при нажатии кнопки? Нам нужно будет увидеть больше кода, чтобы помочь тогда, поскольку нет причин, по которым это не сработает, если только у вас не происходит других вещей. Вы можете попробовать проверить мой ответ на этот другой вопрос, чтобы узнать, что может быть не так: stackoverflow.com/questions/24335218/ - person Sean Adkinson; 17.03.2015