eine Komponente Funktion innerhalb einer Funktion in Reactjs

Question

Aufruf habe ich eine Komponente, die so angelegt ist:

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     }); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

ich die Funktion OnButtonClick aus der entryList Variable in der Render in der Lage sein möchte laufen Funktion, aber ich kann nicht herausfinden, wie es geht. Beim Ausführen der Konsole sagt onButtonClick ist nicht definiert.

Uncaught ReferenceError: onButtonClick is not defined 

Wie kann ich die Funktion "entkommen"? Ich denke, dass this.props.data.map(function(items) {}); ist, was das Problem ist kompliziert wird, weil ich es ganz gut aus zugreifen kann, wenn ich die Taste ähnlichen

 // returns the html of the component 

     return (
      <div className="entryList"> 
       <a onClick={this.onButtonClick} className="btn right">go</a> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

Danke für Ihre Hilfe zu bewegen!

Answer 1

Der Grund Code ist die Art und Weise funktioniert nicht Sie es erwarten, weil der Kontext this Veränderungen innerhalb der anonymen Funktion map geben. map verwendet einen optionalen zweiten Parameter, der den Wert this darstellt, den der Rückruf verwenden wird. Wenn Sie einfach this als zweites Argument zu map hinzufügen, wird Ihr Problem gelöst.

var entryList = this.props.data.map(function(entry) { 
    ... 
}, this); 

Entwickler, die ES2015 können auch einen Pfeil Funktion automatisch den richtigen Kontext this zu binden.

var entryList = this.props.data.map(entry => { 
    ... 
}); 

Referenz: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

Der Kontext ändert sich. So können Sie das tun.

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var self = this; 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={self.onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     }); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
}); 

oder einfach

var Entry = React.createClass({ 
    // executes code on a button press. 

    onButtonClick: function (event) { 
     // (do stuff) 
    }, 

    // generates the entry list with a button and some info. 

    render: function() { 
     var entryList= this.props.data.map(function(entry) { 
      // (convert timestamp into relative time, add some tags etc) 
      return (
       <p> entry.information </p> 
       <a onClick={this.onButtonClick} className="btn right" id={entry.link}> 
        go 
       </a> 
      ); 
     },this); 

     // returns the html of the component 

     return (
      <div className="entryList"> 
       {entryList} 
      </div> 
     ); 
    } 
});