ReactJS将父函数传递给使用map创建的子函数

Question

我需要将父函数传递给子组件，但由于组件是在map函数中生成的，所以它似乎不起作用。以下是有问题的代码：

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

解决这个问题的最佳方法是什么？

Answer 1

它是否在地图功能中制作组件无关紧要。我想你只是忘了绑定你的功能。

您的代码应该是这样的

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

您还可以使用箭头功能，如下所示：

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

这是jsfiddle。