javascript - onClick 功能在 React 组件中没有按预期工作

Question

所以我有这个组件ExpenseItem。我试图onClick在子组件上使用Card。首先我尝试在括号内放置一个箭头函数，但它不起作用。然后我在 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;

谢谢。

标签： javascriptreactjsfunctiononclickhandler

Answer 1

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

你可以对你的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>
  );
}