React 在点击时获取 id 值

IT技术 javascript reactjs callback
2021-05-25 18:07:06

我有以下几点:

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

];
3个回答

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

你只需要添加这个。在函数之前:

 onClick={this.show_overlay} 

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

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

3) 有的情况下,props 中没有 id,而你想传递一些 arg 给函数,那么你可以使用 bind

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

然后在回调中

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

传递 args jsfiddle 的示例

你可以简单地绑定你的方法 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>
            );
        }
    });

我认为您只需要将thisReactComponent绑定到您的函数。目前您eundefined. 试试这个 :

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