Question

我有一个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>
    );
}

Answer 1

在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>
    );
}

将Click事件传递给孩子

1 个答案: