代码之家 › 专栏 › 技术社区 › techie_questie

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

reactjs javascript

techie_questie · 技术社区 · 7 年前

在我的react应用程序中,我创建了一个无状态函数组件,它在JSX中有一个按钮。我想为该按钮编写一个click处理程序,但是在函数外部定义click处理程序会引发错误。我正在学习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

2 回复 | 直到 7 年前

Ivo 7 年前

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

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?

Shubham Khatri 7 年前

函数组件外的处理程序没有正确的语法,它应该是函数或声明为常量

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

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

然而,在这样的场景中,理想情况下,要么处理程序作为父级的道具出现,父级在触发时执行某些操作,要么将函数组件定义为类组件(如果要执行的操作不需要由父级处理)