javascript - 如何使用 React 和 Typescript 处理 div 上的点击事件

Question

我有一个自定义的 Card 组件，它有一个“onClick”类型，可以像这样处理点击:

import React from 'react';
import styles from './card.module.css';

interface Card {
    onClick: React.MouseEventHandler<HTMLDivElement>;
}

const Card: React.FC<Card> = ({ children }) => {
    return <div className={styles.card}>{children}</div>;
};

export default Card;

我正在使用 Card 编写另一个名为 PostCard 的组件，如下所示:

import React from 'react';
import Card from '../Card';
import styles from './postcard.module.css';
import { useRouter } from 'next/router';

type PostCard = {
    title: string;
    description: string;
    slug: string;
};

const PostCard: React.FC<PostCard> = ({ title, description, slug }) => {
    const router = useRouter();

    const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
        console.log('here');
        e.preventDefault();
        router.push('/blog/[slug]', `/blog/${slug}`, { slug });
    };
    return (
        <Card onClick={handleClick}>
            <h2 className={styles.title}>{title}</h2>
            <p className={styles.paragraph}>{description}</p>
        </Card>
    );
};

export default PostCard;

当点击 PostCard 时，我希望它使用 next.js 中的 router 函数并将页面推送到新页面。然而，当我点击 PostCard 时，什么也没有发生。这是怎么回事？ handleClick 没有向控制台打印任何内容，所以我很确定 Card 组件没有注册点击。我应该将 onClick 函数传递给 Card 组件吗？

Answer 1

onClick 需要在 div 标签上而不是在 Card 上，这里您将 handleClick 函数作为 prop 发送到 Card 组件 (onClick)，因此您需要在 Card 组件中接受该 Prop ，并将该功能放在呈现的 div 的 onClick 上。

在明信片

return (
        <Card handleClick={handleClick}>
            <h2 className={styles.title}>{title}</h2>
            <p className={styles.paragraph}>{description}</p>
        </Card>
    );

我们可以将 prop 发送为 handleClick 而不是 onClick 以避免混淆。

在 Card 组件中

const Card: React.FC<Card> = ({ children, handleClick }) => {
    return <div onClick={handleClick} className={styles.card}>{children}</div>;
};