点击获得React ID值 [英] React get id value on click

问题描述

我有以下内容:

    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':

when I click on "action_wrapper" to retrieve the id value I get undefined. I should get either 'D' or 'E' as per my data structure:

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'
    }

];

推荐答案

1) 自您使用以来 React.createClass 和不是es6类，因此 React会为您自动绑定

您只需要在功能前添加此内容即可.

you just need to add this. before func:

 onClick={this.show_overlay} 

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

2) You don't need to use jquery, because in your particular case, you can get id from this.props.data.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);
 },

带有传递参数jsfiddle的示例

这篇关于点击获得React ID值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！