keine Methode Argument Requisiten nicht von Kind Komponente aufgerufen in

Question

reagieren: Ich bin zu reagieren und js brauche ich einige Präzisierungen in Komponenten von Methoden Bindung

I 2 Komponenten Parent und ChildComponent haben

Eltern

var ParentComponent = React.createClass({ 

methodArg: function (value) { 
    console.log("methodArg called", value); 
}, 

methodNoArg: function() { 
    console.log("methodNoArg called"); 
}, 

render: function() { 
    return <ChildComponent m1={(value) => this.methodArg(value)} m2={() => this.methodNoArg} /> 
} 

}) 

Kind

var ChildComponent = React.createClass({ 
render: function() { 
    return (
     <div> 
      <button onClick={()=>this.props.m1(100)}>Call M1</button> 
      <button onClick={()=>this.props.m2()}>Call M2</button> 
     </div> 
    ) 
} 
}) 

Wenn ich klicke Anruf M1 Knopf, methodArg() des Elternteils wird aufgerufen.

Aber wenn ich Anruf klicken M2methodNoArg() nicht genannt zu werden. Was ist das Problem dabei?

Als ich methodNoArg zu Kind übergeben, wird es

<ChildComponent m1={this.methodArg()} m2={this.methodNoArg} /> 

Aber methodArg() heißt immer den Knopf, ohne klicken, seine immer jedes Mal aufgerufen genannt wurden, wenn das Kind Komponente gerendert wird.

Answer 1

<button onClick={()=>this.props.m1(100)}>Call M1</button> 

Ihre obige Zeile sagt bewerten die m1 Verfahren und weist das Ergebnis onClick. Wenn Sie also Ihre Seite aktualisieren, wird die console.log-Anweisung mit dem übergebenen Wert gedruckt, aber sie wird nie wieder aufgerufen, egal wie oft Sie auf die Schaltfläche klicken, da onClick jetzt keine Methode zugewiesen ist.

Sie können erreichen, was Sie wollen, indem Sie die Klammer entfernen, die die Methode automatisch aufruft, ohne zu klicken.

Hier jsfiddle Code-Link funktioniert: http://jsfiddle.net/fp0LvkLg/

Answer 2

Dies ist wegen der Art und Weise Sie Ihre Methode, um eine Stütze

ist (Art, wenn wir auslassen, die Feinheiten der this) entspricht

m2={function() {return this.methodNoArg}}

So

m2={() => this.methodNoArg}

zuweisen Ihre Stütze ist eine Funktion, die eine Funktion zurückgibt, die wiederum nie aufgerufen wird.

Sie wollen einfach Ihre Funktion einer Stütze wie folgt vergeben:

m2={this.methodNoArg}