如何使 Card 组件可点击？

Question

我将 Ant Design 用于我的 WebApp。对于Card，有一个可悬停的道具，使卡片接缝可点击，但没有 onClick 道具。我如何使它真正可点击？

这是我的代码：

import React, { Component } from 'react';
import { Card, Avatar, Icon, Button, Divider } from 'antd';
import EventDetailsDrawer from '../ui/EventDetailsDrawer';

const { Meta } = Card;

class EventCard extends Component {

render() {
    return (
        <div onClick={alert("Hello from here")}>
            <Card
                hoverable
                cover={<img alt="example" src="https://assetsnffrgf-a.akamaihd.net/assets/m/1102015169/univ/art/1102015169_univ_lsr_lg.jpg" />}
                bodyStyle={{ marginBottom: "-5px" }}
                >
                    <Meta
                        //avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                        avatar={<Button type="primary" shape="circle-outline">{this.props.owner}</Button>}
                        title={this.props.title}
                        description={this.props.descp}
                    />
                    <Divider style={{ marginLeft: "0px" }}></Divider>
                    <p><Icon type="clock-circle" style={{ fontSize: "15px", color: "#1890FE" }} theme="outlined" /><span style={{ marginLeft: "15px" }} />{this.props.date}</p>
                    <p><Icon type="environment" style={{ fontSize: "15px", color: "#1890FE" }} theme="outlined" /><span style={{ marginLeft: "15px" }} />{this.props.location}</p>
        </Card>
                    <EventDetailsDrawer></EventDetailsDrawer>
        </div>
                );
            }
        }

export default EventCard

我尝试使潜水（围绕卡片）可点击，但代码在加载应用程序后立即运行，因为我将每张卡片都打包到一个列表项中。如何使 Card 组件可点击？

感谢您的回答 ：）

Answer 1

请注意，您附加到 div 的onClick侦听器的是返回的值，alert而不是实际上应该在单击 div 时运行的函数。

尝试改变这个：

<div onClick={alert("Hello from here")}>

对此：

<div onClick={() => alert("Hello from here")}>

Answer 2

我带着类似的问题来到这里。对我有用的是<Card>用一个<Link>组件包装它。此外，hoverable在卡上设置属性将使其具有“可点击”的效果。例如：

<Link to={'/customer/list'}>
   <Card hoverable>

      // ... removed for brevity...

   </Card>
</Link>