点击获得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

如何获得被点击元素的ID

来自分类Dev

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

来自分类Dev

如何获得id的值

来自分类Dev

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

来自分类Dev

Angular:点击时获得 a 或 li 值

来自分类Dev

React获取点击按钮的ID

来自分类Java

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

来自分类Dev

jQuery 在 jinja2 循环中获得点击值

来自分类Dev

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

来自分类Dev

如何获得点击复选框的值

来自分类Dev

如何在点击时获得随机数组元素的值?

来自分类Dev

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

来自分类Dev

通过点击react.js传递ID

来自分类Dev

如何获得ID用户最优值?

来自分类Dev

我如何获得 COUNT(id) 的值

来自分类Dev

如何使用map()获得ID值

来自分类Dev

无法通过vue $ refs获得id的值?

来自分类Dev

如何将值从按钮ID传递到点击输入?

来自分类Dev

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

来自分类Dev

在React组件中获得承诺值

来自分类Dev

计算从 url 参数 React 获得的值计数

来自分类Dev

没有获得将单选按钮的 id 和值作为参数传递给 react.js 的方法

来自分类Dev

React.js-在点击事件中查找映射元素的ID

来自分类Dev

如何使用他的 id 触发 React 组件的点击事件?

来自分类Dev

如何更改点击链接,以匹配我从另一个API请求获得的ID

来自分类Javascript

如何发送的值从JavaScript的形式获得价值为形式的ID

来自分类Dev

如何在elasticsearch中获得最大_id值?

来自分类Dev

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

来自分类Javascript

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

Related 相关文章

热门标签

归档