產生反應點擊

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