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

【问题标题】：How to handle click events on divs with React and Typescript如何使用 React 和 Typescript 处理 div 上的点击事件
【发布时间】：2020-07-06 01:09:58
【问题描述】：

我有一个自定义 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 组件吗？

【问题讨论】：

标签： javascript reactjs typescript next.js

【解决方案1】：

onClick 需要在 div 标签上，而不是在 Card 上，这里您将 handleClick 函数作为道具发送到 Card 组件 (onClick)，因此您需要在 Card 组件中接受该道具并将函数放在渲染的 div 的 onClick 上。

在PostCard

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

【讨论】：

【解决方案2】：

您在Card 上使用了onClick，但Card 返回一个带有子元素的div，并且onClick 属性不在任何地方使用。

试试这个：

<Card clicked={handleClick}>
    <h2 className={styles.title}>{title}</h2>
    <p className={styles.paragraph}>{description}</p>
</Card>


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

界面也要改一下：

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

【讨论】：