Reagieren ID-Wert auf Klick

Question

Ich habe folgendes erhalten:

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

, wenn ich auf „action_wrapper“ zurückzuholen, die den ID-Wert ich nicht definiert. Ich sollte entweder ‚D‘ oder ‚E‘ wie pro meine Datenstruktur erhalten:

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)Da SieReact.createClass verwenden und nicht es6 Klasse, daher reagiert Autobinding für Sie

Sie ihn nur hinzufügen müssen. vor func:

onClick={this.show_overlay} 

2)Sie brauchen nicht Jquery zu verwenden, weil in Ihrem speziellen Fall, Sie id von this.props.data.id

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

bekommen

3)Es gibt Fälle,, wenn Sie nicht in id Requisiten und Sie wollen etwas arg passieren Funkti auf, verwenden Sie können dann binden

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

und dann in Rückruf

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

example with passing args jsfiddle

Answer 2

können Sie einfach binden Ihre Methode 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

Ich glaube, Sie nur this von ReactComponent binden müssen, um Ihre Funktion. Derzeit ist eundefined. Versuchen Sie folgendes:

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