reactjs - 如何使 Card 组件可点击？

Question

我的 Web 应用程序使用 Ant Design。对于Card ，有一个可悬停的 Prop 可以使卡片接缝可点击，但没有 onClick Prop 。如何使其真正可点击？

这是我的代码:

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")}>