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

Question

所以我有两个.js 文件（它们也叫模块吗？）。第一个 .js 文件是一个基于 class 的组件。它有 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>
    )
}

上面的按钮工作正常，我可以点击它，它会控制台记录单词 'correct answer!'。但出于某种原因，当我尝试将 onClick 传递给“MultipleChoices”file/module 时，它不会控制台日志 'correct answer!'。 MultipleChoices.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 传递给 MultipleChoice.js（它也有一个按钮）时却不能？

Answer 1

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

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

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

Answer 2

在您的父组件中，您已将属性命名为 onClick，而您正试图在子组件中将其访问为 prop.handleClick。

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

Failing to pass onClick function to different file in React

javascript

state

onclick

reactjs

react-props