Question

在我的react应用程序中，我创建了一个无状态功能组件，该组件在JSX中具有一个按钮。我想为该按钮编写一个单击处理程序，但是在函数外部定义单击处理程序会引发错误。我正在学习反应，并且我已经看过许多教程，其中提到我们应该尝试创建更多的无状态组件，因此我正在采用这种方法。

这就是我的做法- 我的组件-

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

Answer 1

您可以在组件中定义函数，然后声明返回部分：

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

另请参阅此帖子以获取有趣的信息：Functions in stateless components?

Answer 2

您在功能组件外部的处理程序语法不正确，应该是一个函数或声明为const

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

或

function handleClick () {
    alert("Button clicked");
 }

但是，在这种情况下，理想情况下，处理程序是作为父级的道具来提供的，它在被触发时会采取一些操作，或者如果要执行的操作不需要由父级处理，则将功能组件定义为类组件

我们如何在React JS中为无状态功能组件编写点击处理程序

2 个答案: