产生反应点击

Question

得到的值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' 
    } 

]; 

Answer 1

1）由于您使用React.createClass和不ES6类，因此反应并自动绑定你

你只需要添加这一点。 FUNC前：

onClick={this.show_overlay} 

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

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

获得ID

3）在有些情况下当你没有在道具ID和你想传递一些对Arg的functi上，那么你可以使用绑定

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)} 
...