未能将onClick函数传递到React中的其他文件

Question

所以我有两个.js文件(它们也称为模块吗?)。第一个.js文件是一个基于类的组件。它有handleClick()和render()。它看起来像这样(我实际上已经删除了很多代码，使它看起来更短):

handleClick(event) {
event.preventDefault()
console.log('handleclick')
this.initializeFetchApiAndSetState()
}
//Helper Function
checkGuessForCorrectAnswer() {
console.log('correct answer!')
}
render() {
return (
<div className="container-main">
<MultipleChoices
onClick={this.handleClick}
data={this.state.guess1}
/>
<button 
className='Submit' 
onClick={this.handleClick}
>
Submit
</button>
</div>
)
}

上面的按钮工作得很好，我可以点击它，它会控制台记录单词"正确答案!"。但由于某些原因，当我试图将onClick传递给multiechoices"文件/模块没有控制台日志'正确答案!'。multiechoices .js文件看起来像这样:

import React from "react"
function MultipleChoices(props) {
return(
<div>
<div className="button-grid">
<button
className="btn"
value={props.data}
onClick={props.handleClick}
> 
{props.data}
</button>
</div>
</div>
)
}
export default MultipleChoices

为什么按钮可以激活onClick在第一个文件，但不是当我试图传递onClick到multiechoice .js(其中也有一个按钮)?

Answer 1

在您的上部组件中，您需要将onClick属性替换为handleClick属性。

<MultipleChoices
handleClick={this.handleClick}
data={this.state.guess1}
/>

因为在多重选择组件中，你从属性(未设置)中调用handleClick方法

Answer 2

在父组件中，你给属性命名为onClick，而你试图在子组件中以prop.handleClick的形式访问它。