点击时反应获取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'
    }

];

1) 自从你使用 React.createClass, and 不是 es6 类， 所以React 会为你自动绑定

你只需要添加this.在函数之前：

 onClick={this.show_overlay} 

2) 你不需要使用jquery，因为在你的具体情况下，你可以从 this.props.data.id 获取 id

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

3) 有案例当你的 props 中没有 id 时，并且你想传递一些参数给函数，那么你可以使用bind

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

然后在回调中

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

传递参数 jsfiddle 的示例 https://jsfiddle.net/h6oeffph/2/