我有一个click事件，以在父级中显示一个弹出窗口，需要将其向下传递给List child，然后传递给Item child，再传递给List child。当用户单击链接组件时，它将打开弹出窗口。现在无法正常工作，“ TypeError：onCourseSelect不是函数。我的代码在下面。请帮助！
App.js
onCourseSelect=(course)=>{
this.setState({selectedCourse:course
,showPopup:true
});
};
<List course={course} onCourseSelect={this.onCourseSelect} />
List.js
const List=(course,onCourseSelect)=>{
return(
<Item key={course.ID} course={course} onCourseSelect={onCourseSelect} />)}
)}
Item.js
const Item=({course, onCourseSelect})=>{
return(<Link onCourseSelect={onCourseSelect(course)} course={course}></Link> )
}
Link.js
const Link=({course, onCourseSelect})=>{
return (
<div>
<input type="button" value="View More" onClick={onCourseSelect(course)} />
</div>
);
}
在Item.js中，您写的onCourseSelect={onCourseSelect(course)}应该是，应该将它onCourseSelect={onCourseSelect}作为道具传递给子组件，以便在其中调用它。该课程作为组件中的单独道具通过。
在<input>那么你可以做，onClick = {()=>{ onCourseSelect(course) }}。
编写onClick = { onCourseSelect(course) }将在每次重新渲染时调用onCourseSelect方法。
App.js
onCourseSelect=(course)=>{
this.setState({
selectedCourse:course,
showPopup:true
});
};
<List course={course} onCourseSelect={this.onCourseSelect} />
List.js
const List=({course,onCourseSelect})=>{
return(
<Item key={course.ID} course={course} onCourseSelect={onCourseSelect} />)}
)}
Item.js
const Item=({course, onCourseSelect})=>{
return(<Link onCourseSelect={onCourseSelect} course={course}></Link> )
}
Link.js
const Link=({course, onCourseSelect})=>{
return (
<div>
<input type="button" value="View More" onClick={()=> onCourseSelect(course)} />
</div>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句