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");

在Meteor / React中使用ReactiveVars

1 个答案: