Question

我会非常感激能帮助我解决这条问题：单击按钮时如何加载功能因为现在我有这个，但它不起作用

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();
    }
})

谢谢

Answer 1

在这种情况下，您应该使用状态而不是使用标记创建三种不同的方法，例如

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

Example

当我点击reactjs中的按钮时如何加载一个函数

1 个答案: