Question

我有以下内容：

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

];

Answer 1

1） 由于您使用 React.createClass和而不是es6类，因此 React会为您自动绑定< /强>

你只需要在func：
之前添加 this。
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); },

example with passing args jsfiddle

Answer 2

你可以简单地绑定你的方法action_wrapper

 var SingleEditableModule = React.createClass({
        show_overlay: function(id) {
           //your id is here
        },
        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={this.show_overlay.bind(this,this.props.data.id)} 
                            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>
            );
        }
    });

Answer 3

我认为你只需要将ReactComponent的this绑定到你的函数。目前您的e是undefined。试试这个：

...
  onClick={this.show_ovelay.bind(this)}
...

单击时React获取id值

3 个答案: