onClick 函数在 React 组件中未按预期工作

Question

所以我有这个组件 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;

谢谢。

Answer 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>
  );
}

Answer 2

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

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

   export default Card;

onClick 函数在 React 组件中未按预期工作

onClick function is not working as expected in React component

javascript

function

onclick

handler

reactjs