2016-03-01 3 views
0

Когда я нажимаю кнопку, которая запускает {this.subscribe}, я хочу поменять HTML на этой кнопке на «UnSubscribe», а при повторном нажатии измените ее на «Подписаться». Любая помощь очень ценится здесь. Я получил это для работы с AutoVars, но у меня проблемы с ReactiveVar. Любая помощь очень ценится.Использование ReactiveVars в Meteor/React

Header = React.createClass({ 
    mixins: [ReactMeteorData], 

    getInitialState: function(){ 
    Meteor.subscribe('directory'); 
    var subscribeText = new ReactiveVar('UnSubscribe'); 
    return { 
     subscribeText: subscribeText 
    }; 
    }, 

    getMeteorData: function() { 
    var subscribeBoolean = false; 
    var subscribeText = this.state.subscribeText.get(); 
    return { 
     subscribeBoolean: subscribeBoolean, 
     subscribeText: subscribeText 
    }; 
    }, 


    subscribe: function(){ 
    //Meteor.users.update({_id: Meteor.user()._id}, {$set:{"profile.name": "Carlos"}}); 
    if (this.data.subscribeBoolean === true) { 
     this.data.subscribeBoolean = false; 
     this.data.subscribeText = "Subscribe"; 
    } 
    else { 
     this.data.subscribeBoolean = true; 
     this.data.subscribeText = "UnSubscribe"; 
    } 
return { 
}; 
    }, 
    render: function() { 
    //Move this into getMeteorData so that the HTML is grabbing straight 
//from the getMeteorData 
return (
<nav className="navbar navbar-default"> 
    <div className="container-fluid"> 
     <div className="navbar-header"> 
     <a className="navbar-brand" href="#">Reddit Clone</a> 
     </div> 

    <ul className="nav navbar-nav"> 
    <li className="active"><a href="#">Link <span className="sr-only">(current)</span></a></li> 
    <li><a href="#">Link</a></li> 
    </ul> 
    <ul className="nav navbar-nav navbar-right"> 
    <li> 
     <button onClick={this.subscribe}> 
     {this.data.subscribeText} 
     </button> 
    </li> 
    <li> <AccountsUIWrapper align="right" /> </li> 
    </ul> 

ответ

1

Вы должны использовать метод set для установки данных на ReactiveVar.

Так, например,

this.data.subscribeText = "Subscribe"; 

Станет:

this.data.subscribeText.set("Subscribe"); 
+0

Теперь я получаю 'неперехваченным TypeError: this.data.subscribeText.set не является функцией' Я определенно есть пакет установлен хотя – ChrisWilson

+0

Я переместил var subscribeText = this.data.subscribeText.get(); в возвращение и больше не получает ошибку, но все еще не видит изменения HTML. Мысли? – ChrisWilson

+0

К сожалению, я не знаю, как работает React, поэтому я не могу решить проблему самостоятельно. Тем не менее, я предполагаю, что ссылка на 'subscribeText' перепуталась. Вы должны определить его где-нибудь, откуда каждая часть вашего кода может получить к нему доступ. –

Смежные вопросы