ReactJS übergeben Elternfunktion in Kind erstellt mit Karte

Question

Ich muss eine übergeordnete Funktion an eine untergeordnete Komponente übergeben, aber es scheint nicht zu funktionieren, weil die Komponente in einer Kartenfunktion gemacht wird. Hier ist der Code in Frage:

{this.state.recipes.map(function(a,index){ 
    return (<Recipe name={a.name} ingredients={a.ingredients} index={index} onClick={this.handleDelete}/>); 
} 

Was ist der beste Weg, dies zu umgehen?

Answer 1

Es spielt keine Rolle, ob die Komponente in einer Kartenfunktion erstellt wird. Ich glaube, du hast gerade vergessen, deine Funktion zu binden.

Der Code sollte wie dieses

{this.state.recipes.map(function(a,index){ 
    return (<Recipe name={a.name} ingredients={a.ingredients} index={index} onClick={this.handleDelete.bind(this}/>); 
} 

Sie sich auch Pfeil-Funktion nutzen können, wie folgt aus:

{this.state.recipes.map((a,index) => <Recipe name={a.name} ingredients={a.ingredients} index={index} onClick={this.handleDelete.bind(this}/>)} 

Hier ist jsfiddle.