点击获得React ID值

亚历山德罗

我有以下几点:

    var SingleEditableModule = React.createClass({
        show_overlay: function(e) {
            console.log($(e.target).attr('id'));
        },
        render: function() {
            var show_overlay = this.show_overlay;
            return (
                <div className="large-4 small-12 columns">
                    <h3 className="title">{this.props.data.title}</h3>
                    <div className="month">
                        <p>
                            {this.props.data.month}
                        </p>
                    </div>
                    <div className="img-holder">
                        <div 
                            id={this.props.data.id} 
                            onClick={show_overlay} 
                            className="action_wrapper">
                                <span className="swap_trigger"></span>
                                <span className="action">
                                    {this.props.data.action}
                                </span>
                        </div>
                    </div>
                    <h4>{this.props.data.title_description}</h4>
                    <p>{this.props.data.description}</p>
                </div>
            );
        }
    });

当我单击“ action_wrapper”以检索ID值时,我不确定。根据我的数据结构,我应该得到“ D”或“ E”:

var empty_modules_DE = [
    {
        id: 'D',
        title: 'Module D',
        title_description: 'Your first rotation',
        description: 'In your penultimate module, Module D, you have the option of taking electives and spending six weeks at any of Hult’s home campuses, or our rotation centers in Shanghai and New York. You can choose to stay for the next module and extend your stay to twelve weeks if you prefer to only rotate once.',
        action: 'click to choose a campus',
        month: 'june'
    },
    {
        id: 'E',
        title: 'Module E',
        title_description: 'Where to next?',
        description: 'For your final module, Module E, you can choose to take electives and spend six weeks at any of Hult’s seven campuses worldwide. That includes all five of our home campuses, and our rotation centers in Shanghai, New York, and Ashridge Estate, U.K.',
        action: 'click to choose a campus',
        month: 'june'
    }

];
科科文·弗拉迪斯拉夫(Kokovin Vladislav)

1) 由于您使用 React.createClass,而不是es6 class,因此React为您自动绑定

您只需要添加它。在func之前:

 onClick={this.show_overlay} 

2) 您不需要使用jquery,因为在您的特定情况下,您可以从this.props.data.id获取ID

 show_overlay: function() {
      console.log(this.props.data.id);
 },

3) 在某些情况下,如果您在道具中没有id,而您想将一些arg传递给函数,则可以使用bind

 onClick={this.show_overlay.bind(null,"someValue")}

然后在回调中

 show_overlay: function(someValue) {
      console.log(someValue);
 },

传递args jsfiddle的示例

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

点击获得React ID值

来自分类Dev

如何获得被点击元素的ID

来自分类Dev

当子节点是点击事件目标时,如何在React中获得div包装器的ID?

来自分类Dev

引导选择-单击获得点击值

来自分类Dev

Angular:点击时获得 a 或 li 值

来自分类Dev

React获取点击按钮的ID

来自分类Dev

如何获得一个按钮的ID在点击的按钮?

来自分类Dev

如何获得点击数据属性值?

来自分类Dev

如何获得按钮点击时计数计时器的值?

来自分类Dev

如何在JavaScript中获得点击的li值?

来自分类Dev

如何获得按钮点击时计数计时器的值?

来自分类Dev

jQuery 在 jinja2 循环中获得点击值

来自分类Dev

我如何获得 COUNT(id) 的值

来自分类Dev

使用点击 <a> 的数据 ID 更新隐藏输入的值

来自分类Dev

如何使用angular.element('#id')获得输入元素的值

来自分类Dev

值为空时,Razor html标签不会获得ID

来自分类Dev

如何获得使用dexie js直接添加的值的ID?

来自分类Dev

为什么我的django id字段获得user字段的值?

来自分类Dev

$ users_ID始终获得“ 2”作为值

来自分类Dev

如何获得 Laravel 中相同 id 值的总和?

来自分类Dev

如何仅使用React获得检查的单选按钮值?

来自分类Dev

没有从函数 [React Native] 获得任何返回值

来自分类Dev

如何获取任何父div点击哪个子div的id值

来自分类Dev

如何获得被点击的元素?

来自分类Dev

我的点击处理程序在React中以不同的值触发了两次

来自分类Dev

React - 一次显示一个数组值并随着点击而改变

来自分类Dev

如何获得所有LI UL元素ID值并将它们放置在JavaScript数组中?

来自分类Dev

我可以为Google OpenIDConnect id_token获得一致的“ iss”值吗?

来自分类Dev

我无法从数据库获得ID,并且遇到非数字值错误

Related 相关文章

  1. 1

    点击获得React ID值

  2. 2

    如何获得被点击元素的ID

  3. 3

    当子节点是点击事件目标时,如何在React中获得div包装器的ID?

  4. 4

    引导选择-单击获得点击值

  5. 5

    Angular:点击时获得 a 或 li 值

  6. 6

    React获取点击按钮的ID

  7. 7

    如何获得一个按钮的ID在点击的按钮?

  8. 8

    如何获得点击数据属性值?

  9. 9

    如何获得按钮点击时计数计时器的值?

  10. 10

    如何在JavaScript中获得点击的li值?

  11. 11

    如何获得按钮点击时计数计时器的值?

  12. 12

    jQuery 在 jinja2 循环中获得点击值

  13. 13

    我如何获得 COUNT(id) 的值

  14. 14

    使用点击 <a> 的数据 ID 更新隐藏输入的值

  15. 15

    如何使用angular.element('#id')获得输入元素的值

  16. 16

    值为空时,Razor html标签不会获得ID

  17. 17

    如何获得使用dexie js直接添加的值的ID?

  18. 18

    为什么我的django id字段获得user字段的值?

  19. 19

    $ users_ID始终获得“ 2”作为值

  20. 20

    如何获得 Laravel 中相同 id 值的总和?

  21. 21

    如何仅使用React获得检查的单选按钮值?

  22. 22

    没有从函数 [React Native] 获得任何返回值

  23. 23

    如何获取任何父div点击哪个子div的id值

  24. 24

    如何获得被点击的元素?

  25. 25

    我的点击处理程序在React中以不同的值触发了两次

  26. 26

    React - 一次显示一个数组值并随着点击而改变

  27. 27

    如何获得所有LI UL元素ID值并将它们放置在JavaScript数组中?

  28. 28

    我可以为Google OpenIDConnect id_token获得一致的“ iss”值吗?

  29. 29

    我无法从数据库获得ID,并且遇到非数字值错误

热门标签

归档