Javascript 如何在reactjs中单击按钮时加载函数

如果有人能帮助我，我将不胜感激。我有： 如何在单击按钮时加载函数 因为现在我有了这个，但它不起作用

export var Modulo = React.createClass({ 
    prom1: function () {
        return(
            <div>
                <h1> CONTENT TWO</h1>
                <span  >Para vos bebe</span>
                <span onClick={this.prom2}> Hasta agotar existencias</span>
                <span onClick={this.prom3}>Promociones de la hora</span>
            </div>
        )   
    },
    prom2: function () {
        return(
            <div>
                <h1> CONTENT TWO</h1>
                <span  onClick={this.prom1}>Para vos bebe</span>
                <span > Hasta agotar existencias</span>
                <span onClick={this.prom3}>Promociones de la hora</span>
            </div>
        )   
    },
    prom3: function () {
        return(
            <div>
                <h1> CONTENT TREE</h1>
                <span onClick={this.prom1} >Para vos bebe</span>
                <span onClick={this.prom2}> Hasta agotar existencias</span>
                <span>Promociones de la hora</span>
            </div>
        )   
    },
    render: function() {
        return this.prom2();
    }
})

export var Modulo=React.createClass（{
prom1：函数（）{
返回(
内容二
帕拉沃斯贝贝酒店
哈斯塔阿戈塔存在
拉赫拉促进会
)   
},
prom2：函数（）{
返回(
内容二
帕拉沃斯贝贝酒店
哈斯塔阿戈塔存在
拉赫拉促进会
)   
},
prom3：函数（）{
返回(
内容树
帕拉沃斯贝贝酒店
哈斯塔阿戈塔存在
拉赫拉促进会
)   
},
render:function（）{
返回这个.prom2（）；
}
})

---

谢谢

在这种情况下，您应该使用states，而不是像这样创建三种不同的带有标记的方法

var Modulo = React.createClass({ 
  getInitialState: function () {
    var DEFAULT_TITLE = 'CONTENT One';

    return {
      title: DEFAULT_TITLE,

      links: [{
        link: 'Para vos bebe',
        title: DEFAULT_TITLE,
        isActive: true
      }, {
        link: 'Hasta agotar existencias',
        title: 'CONTENT TWO',
        isActive: false
      }, {
        link: 'Promociones de la hora',
        title: 'CONTENT THREE',
        isActive: false
      }]   
    }
  },

  handleClick: function(index) {
    var links = this.state.links.map((e, i) => {
      e.isActive = !!(i === index)
      return e;
    });

    this.setState({
      title: this.state.links[index].title,
      links: links
    })
  },

  render: function() {
    var links = this.state.links.map(function (link, index) {
      return <span 
        key={index}
        className={ link.isActive ? 'active' : '' }
        onClick={ this.handleClick.bind(this, index) }
      >
        { link.link }
      </span>
    }, this);

    return <div>
      <h1>{ this.state.title }</h1>
      <div>{ links }</div>
    </div>
  }
});

var Modulo=React.createClass（{
getInitialState:函数（）{
var DEFAULT_TITLE='CONTENT One'；
返回{
标题：默认标题，
链接：[{
链接：“paravos bebe'，
标题：默认标题，
是的
}, {
链接：“Hasta agotar existencias”，
标题:"内容二",，
isActive:错误
}, {
链接：'Promotiones de la hora'，
标题:"内容三",，
isActive:错误
}]   
}
},
handleClick:函数（索引）{
var links=this.state.links.map（（e，i）=>{
e、 isActive=！！（i==索引）
返回e；
});
这是我的国家({
标题：this.state.links[index]。标题，
链接：链接
})
},
render:function（）{
var links=this.state.links.map（函数（链接，索引）{
返回
{link.link}
}，这个）；
返回
{this.state.title}
{links}
}
});

---

您需要在组件中保持状态，并且根据状态，

render

将必须调用一个，如果这些方法无效。将其中一个方法作为事件处理程序调用是没有意义的。为什么

render

会神奇地返回事件处理程序返回的内容？见文件：