时间戳

首页 > 解决方案 > 如何使卡片组件可点击？

reactjs - 如何使卡片组件可点击？

问题描述

我将 Ant Design 用于我的 WebApp。对于Card，有一个 hoverable 道具使卡片接缝可点击，但没有 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

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

感谢您的回答 ：）

标签： reactjsantd

解决方案

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

尝试改变这个：

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

对此：

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

推荐阅读