Javascript 无法将onClick函数传递到React中的不同文件

所以我有两个.js文件（它们也被称为模块吗？）。第一个.js文件是一个基于类的组件。它有

handleClick（）

和

render（）

。它看起来是这样的（实际上我已经删除了很多代码，使它在这里看起来更短）：

handleClick（事件）{
event.preventDefault（）
console.log（'handleclick'）
this.initializeFetchApiAndSetState（）
}
//辅助函数
checkGuessForCorrectAnswer（）{
console.log（'正确答案！'）
}
render（）{
返回(
提交
)
}

上面的按钮工作得很好，我可以点击它，它会记录单词“正确答案！”。但由于某些原因，当我试图将onClick传递给“multipleechoices”文件/模块时，它不会在控制台中记录“correct answer！”。multipleechoices.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

从“React”导入React
功能多功能片（道具）{
返回(
{props.data}
)
}
导出默认多回执

---

为什么按钮可以在第一个文件中激活onClick，但在我尝试将onClick传递给MultipleChoice.js（它也有一个按钮）时不能激活呢？

在上面的组件中，您需要将

onClick

属性替换为

handleClick

属性

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

---

因为在Multiple Choices组件中，您正在从父组件中的属性（未设置）调用handleClick方法

，您已将属性命名为onClick，而您正在尝试以prop.handleClick的形式在子组件中访问它

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