onClick 函数在 React 组件中没有按预期工作答案

【问题标题】：onClick function is not working as expected in React componentonClick 函数在 React 组件中没有按预期工作
【发布时间】：2021-11-06 02:29:29
【问题描述】：

所以我有这个组件ExpenseItem。我试图在子组件Card 上使用onClick。首先我尝试在括号内放置一个箭头函数，但它不起作用。然后我在 return 之外初始化了箭头函数并尝试将函数放在 onClick 括号内，但我不确定为什么它仍然 不起作用。代码如下：

import React from 'react';
import '../styles/ExpenseItem.css';
import ExpenseDate from './ExpenseDate';
import Card from '../Card.jsx';

const ExpenseItem = (props) => {
  
    const clickHandler = () => alert('im working');

    return (

        <Card className='expense-item' onClick={clickHandler}>
            <div>
                <ExpenseDate date={props.date} />
            </div>
            <div className='expense-item__description'>
                <div className='expense-item__descbox'>
                    <h2>{props.title}</h2>
                    <span>{props.type}</span>
                </div>
                <div className='expense-item__price'>{props.amount}</div>
            </div>
        </Card>
    )
};

export default ExpenseItem;

谢谢。

【问题讨论】：

可以添加Card 组件吗？
@Nokwiw 这里是：`import './styles/Card.css'; const Card = (props) => { const classes = card ${props.className};返回
{props.children}
};导出默认卡； `
@AthosFranco 好在哪里...
您在ExpenseDate 下方缺少div 的结束标签

标签： javascript reactjs function onclick handler

【解决方案1】：

您还需要在您的Card 组件上实现onClick。

您可以对您的Card 执行以下操作：

const Card = (props) => {
  return (
    <div className="card" {...props}>{props.children}</div>
  );
}

或

const Card = (props) => {
  return (
    <div className="card" onClick={props.onClick}>{props.children}</div>
  );
}

【讨论】：

【解决方案2】：

在您的 Card 组件中执行此操作：

    const Card = (props) => {
     const classes = card ${props.className};
     return <div className={classes} onClick={props.onClick}>{props.children}</div> 
};

   export default Card;

【讨论】：