在流星/反应中使用ReactiveVars

Question

当我点击触发{this.subscribe}的按钮时，我想将该按钮上的HTML更改为'取消订阅'，再次单击时更改回'订阅'。任何帮助在这里大大赞赏。我得到这个与AutoVars一起工作，但在使用ReactiveVar时遇到了麻烦。任何帮助非常感谢。

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> 

Answer 1

您需要使用set方法设置在ReactiveVar数据。

因此，例如，

this.data.subscribeText = "Subscribe"; 

将变为：

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