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

谢谢

Oleksandr T.

在这种情况下,您应该使用状态,而不是使用标记创建三个不同的方法,像这样

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当我单击列表项时如何设置单选按钮以选中

来自分类Dev

当我单击登录按钮时,Angularjs显示注销按钮

来自分类Dev

当我单击控制台上的关闭按钮时,为什么不调用析构函数?

来自分类Dev

当我使用MVVM模式和MVVM Light单击后退按钮时,如何返回预览页面?

来自分类Dev

当我多次单击“提交”按钮(正在加载以发布帖子时)时,该帖子被多次发布

来自分类Dev

当我单击php中的保存amt按钮时如何更新复选框选中的行

来自分类Dev

当我单击gridview中的“编辑”按钮时,如何调用“删除行”事件?asp.net C#

来自分类Dev

当我在浏览器中单击“后退”按钮时,我需要将上一页重新加载到“另一个URL”

来自分类Dev

在reactjs的表格行中单击``编辑''按钮时如何保存我的userData

来自分类Dev

当我在反应中单击“取消”按钮时,为什么要重新加载页面,为什么在反应中其路径也会改变?

来自分类Dev

当我单击主要按钮组/按钮阵列中的一个按钮时,如何显示一组按钮

来自分类Dev

当我从JavaScript中的数组单击时如何获取该按钮的特定数组

来自分类Dev

当我单击按钮内的元素时,onClick函数不获取值

来自分类Dev

当我单击一个按钮时,不同的按钮在kivy recycleview中闪烁

来自分类Dev

当我在目标C中单击一个按钮(添加按钮)时,如何创建按钮组?

来自分类Dev

当我在android编程中单击按钮时如何清除文本视图

来自分类Dev

当我在Android应用程序中单击“笔记”按钮时,如何调用我的NoteMain类

来自分类Dev

当我单击C#中的另一个按钮时如何调用按钮单击事件

来自分类Dev

当我单击window.open时如何加载JavaScript函数?

来自分类Dev

当我在android应用中单击按钮时如何打开Google Map

来自分类Dev

当我单击按钮并将其存储在会话变量中时,如何获取链接

来自分类Dev

在Facebook Integration中,当我单击登录按钮时,它显示正在加载并返回主屏幕?

来自分类Dev

当我调用onClick函数时如何隐藏删除按钮

来自分类Dev

当我的按钮放置在angularjs中的不同控制器中时,如何在按钮单击时调用控制器功能

来自分类Dev

当我多次单击“登录”按钮时,它加载另一个页面的次数与按钮被单击的次数相同。我该如何防止这种情况?

来自分类Dev

当我单击“更改”按钮时,函数“changeUsername”没有被执行?

来自分类Dev

我如何做到这一点,当我从 foreach 列表中单击一个按钮时,它只会激活该特定列表中的按钮?

来自分类Dev

Reactjs:单击时如何更改按钮样式

来自分类Dev

当我在 PageView 中单击按钮时如何转到页面?

Related 相关文章

  1. 1

    当我单击列表项时如何设置单选按钮以选中

  2. 2

    当我单击登录按钮时,Angularjs显示注销按钮

  3. 3

    当我单击控制台上的关闭按钮时,为什么不调用析构函数?

  4. 4

    当我使用MVVM模式和MVVM Light单击后退按钮时,如何返回预览页面?

  5. 5

    当我多次单击“提交”按钮(正在加载以发布帖子时)时,该帖子被多次发布

  6. 6

    当我单击php中的保存amt按钮时如何更新复选框选中的行

  7. 7

    当我单击gridview中的“编辑”按钮时,如何调用“删除行”事件?asp.net C#

  8. 8

    当我在浏览器中单击“后退”按钮时,我需要将上一页重新加载到“另一个URL”

  9. 9

    在reactjs的表格行中单击``编辑''按钮时如何保存我的userData

  10. 10

    当我在反应中单击“取消”按钮时,为什么要重新加载页面,为什么在反应中其路径也会改变?

  11. 11

    当我单击主要按钮组/按钮阵列中的一个按钮时,如何显示一组按钮

  12. 12

    当我从JavaScript中的数组单击时如何获取该按钮的特定数组

  13. 13

    当我单击按钮内的元素时,onClick函数不获取值

  14. 14

    当我单击一个按钮时,不同的按钮在kivy recycleview中闪烁

  15. 15

    当我在目标C中单击一个按钮(添加按钮)时,如何创建按钮组?

  16. 16

    当我在android编程中单击按钮时如何清除文本视图

  17. 17

    当我在Android应用程序中单击“笔记”按钮时,如何调用我的NoteMain类

  18. 18

    当我单击C#中的另一个按钮时如何调用按钮单击事件

  19. 19

    当我单击window.open时如何加载JavaScript函数?

  20. 20

    当我在android应用中单击按钮时如何打开Google Map

  21. 21

    当我单击按钮并将其存储在会话变量中时,如何获取链接

  22. 22

    在Facebook Integration中,当我单击登录按钮时,它显示正在加载并返回主屏幕?

  23. 23

    当我调用onClick函数时如何隐藏删除按钮

  24. 24

    当我的按钮放置在angularjs中的不同控制器中时,如何在按钮单击时调用控制器功能

  25. 25

    当我多次单击“登录”按钮时,它加载另一个页面的次数与按钮被单击的次数相同。我该如何防止这种情况?

  26. 26

    当我单击“更改”按钮时,函数“changeUsername”没有被执行?

  27. 27

    我如何做到这一点,当我从 foreach 列表中单击一个按钮时,它只会激活该特定列表中的按钮?

  28. 28

    Reactjs:单击时如何更改按钮样式

  29. 29

    当我在 PageView 中单击按钮时如何转到页面?

热门标签

归档