Aufruf der onClick-Funktion in React

Ich habe eine zustandslose funktionale Komponente namens Likes. Darin habe ich zwei Funktionen: handleLikePlus() und handleLikeMinus(). Ich möchte jedes einzelne von ihnen auslösen, wenn Sie auf den Pfeil nach oben oder unten in der Komponente Likes klicken. HierAufruf der onClick-Funktion in React

ist der Code für meine Komponente

function Likes({likes}) { 
    function handleLikePlus() { 
     this.setState({ 
     likes: this.state.likes + 1 
     }); 
    }; 
    function handleLikeMinus() { 
     this.setState({ 
     likes: this.state.likes - 1 
     }); 
    }; 
    return (
     <div> 
     <div onClick={this.handleLikePlus()}> 
      <h5><i className="fa fa-arrow-up" aria-hidden="true"></i></h5> 
     </div> 
     <div> 
      <h4>{likes}</h4> 
     </div> 
     <div onClick={this.handleLikeMinus()}> 
      <h5><i className="fa fa-arrow-down" aria-hidden="true"></i></h5> 
     </div> 
     </div> 
    ); 
}

Meine Konsole kehrt:

Uncaught TypeError: cannot read property 'handleLikePlus' of undefined

Wo ich falsch gehe? Ist es ein einfacher Syntaxfehler? Oder rufe ich die Funktion falsch an?

Vielen Dank im Voraus.

Quelle

2016-09-21 Paulos3000

der ganze Punkt von Staatenlosen bedeutet kein 'this'. und sicherlich kein 'thie.state' und vor allem kein' this.setState'. Staatenlos richtig? Übergeben Sie diese Funktionen von einem Elternteil. es sollte auch 'onClick = {handleLikePlus}' nicht 'onClick = {handlLikePlus()}' sein. Sie übergeben eine Funktionsreferenz, nicht das Ergebnis des Aufrufs einer Funktion – azium

Oh Mann, das war dumm ... . Clue ist im Namen, richtig? :) Also, Lösung ist es von einem Elternteil übergeben. Auch sehr nützlich zu wissen, dass es eine Funktion ist ** Referenz ** im Gegensatz zu einer Funktion ** Anruf **. Vielen Dank! – Paulos3000

Sie verwenden eine zustandslose Komponente, aber Sie versuchen immer noch, setState() zu verwenden - das wird nicht funktionieren. Wenn Sie einen Zustand benötigen, verwenden Sie eine normale Komponente.

Auch, wie der Fehler liest, handleLikePlus kann nicht von this zugegriffen werden, da es keine this innerhalb Ihrer Funktion gibt.

Quelle

2016-09-21 18:40:07 tobiasandersen

Wie oben ... danke :) – Paulos3000

Aufruf der onClick-Funktion in React

Antwort

Verwandte Themen