Javascript 如何在React JS中为无状态函数组件编写单击处理程序

在react应用程序中，我创建了一个无状态函数组件，该组件在JSX中有一个按钮。我想为该按钮编写一个点击处理程序，但在函数外部定义点击处理程序会引发错误。 我正在学习react，我看到很多教程提到我们应该尝试创建更多无状态组件，因此我遵循这种方法

这就是我的表现- 我的组件-

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';

handleClick = () =>{
    alert("Button clicked");
 }


const AccordionComp = (props) => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h4>List</h4>
            </AccordionItemTitle>
            <AccordionItemBody>
                <table className="accordionTable">
                    <thead className="row">
                        <th className="col-sm-2">City Name</th>
                        <th className="col-sm-2">Name</th>
                    </thead>
                    <tbody>
                        <tr className="row">
                            <td className="col-sm-2">{props.propFromParent.city}</td>
                            <td className="col-sm-2">{props.propFromParent.name}</td>
                            <td className="col-sm-2"><button onClick={handleClick}>Click Me</button></td>
                        </tr>   
                    </tbody>
                </table>

            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

export default  AccordionComp

从“React”导入React；
从“react dom”导入react dom；
进口{
手风琴，
手风琴项目，
手风琴项目名称，
手风琴体，
}来自“手风琴”；
导入“react-accessible-accordion/dist/fancy-example.css”；
导入“react-accessible-accordion/dist/minimal-example.css”；
handleClick=（）=>{
警报（“点击按钮”）；
}
const AccordionComp=（道具）=>(
列表
城市名称
名称
{props.propFromParent.city}
{props.propFromParent.name}
点击我
);
导出默认AccordionComp

您可以在组件中定义函数，然后声明退货零件：

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';



const AccordionComp = (props) => {

const handleClick = () => {
    alert("Button clicked");
 }

return (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h4>List</h4>
            </AccordionItemTitle>
            <AccordionItemBody>
                <table className="accordionTable">
                    <thead className="row">
                        <th className="col-sm-2">City Name</th>
                        <th className="col-sm-2">Name</th>
                    </thead>
                    <tbody>
                        <tr className="row">
                            <td className="col-sm-2">{props.propFromParent.city}</td>
                            <td className="col-sm-2">{props.propFromParent.name}</td>
                            <td className="col-sm-2"><button onClick={handleClick}>Click Me</button></td>
                        </tr>   
                    </tbody>
                </table>

            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
    )
};

export default  AccordionComp

从“React”导入React；
从“react dom”导入react dom；
进口{
手风琴，
手风琴项目，
手风琴项目名称，
手风琴体，
}来自“手风琴”；
导入“react-accessible-accordion/dist/fancy-example.css”；
导入“react-accessible-accordion/dist/minimal-example.css”；
const AccordionComp=（道具）=>{
常量handleClick=（）=>{
警报（“点击按钮”）；
}
返回(
函数组件外部的处理程序没有正确的语法，它应该是函数或声明为常量

const handleClick = () =>{
    alert("Button clicked");
 }

或

然而，在这种情况下，理想情况下，要么处理程序作为父组件的道具，在触发时执行某些操作，要么您将功能组件定义为类组件，如果要执行的操作不需要由父组件处理ot传递父函数，但在完全可行的无状态组件中有一个单击处理程序，cf answer。
function handleClick () {
    alert("Button clicked");
 }