如何使卡片组件可点击？答案

【问题标题】：How to make Card component clickable?如何使卡片组件可点击？
【发布时间】：2018-09-11 17:03:12
【问题描述】：

我将 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 组件可点击？

感谢您的回答:)

【问题讨论】：

使用最新的 Ant Design 将 onClick={() => console.log('CLICK')} 放在 Card 组件上似乎可以正常工作。
虽然我认为这可行，但我认为使用 <div> 实现在库的实用程序之外工作。相反，根据我的回答，用<Link> 元素包装。编码愉快！

标签： reactjs antd

【解决方案1】：

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

尝试改变这个：

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

到这里：

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

【讨论】：

虽然我认为这可行，但我认为使用<div> 实现在库的实用程序之外。相反，根据我的回答，我用<Link> 元素包装。编码愉快！

【解决方案2】：

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

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

      // ... removed for brevity...

   </Card>
</Link>

【讨论】：

【解决方案3】：

试试这个，onClick 需要一个函数，并在执行 render() 时调用。

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={<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

【讨论】：

【解决方案4】：

请记住，就可访问性而言，让 div 可点击是一种非常糟糕的做法，因为没有鼠标，您无法使用 Tab 键进入卡片，也无法使用 Enter 或空格来点击卡片。

我的建议是用一个无样式的按钮包裹卡片，这样你就可以利用按钮的所有优点（点击、标签、键盘支持）

    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 (
            <button onClick={alert("Hello from here")} className="unstyled-button">
                <Card />
            </button>
                    );
                }
            }

    export default EventCard

css

 .unstyled-button {
       border:none;
    }

【讨论】：

【解决方案5】：

也许这会有所帮助：

youHandleClickFunc = (params) => {
console.log('you need params from Card', params)
}

render() {
        return (
          <Card handleClick={()=> this.youHandleClickFunc(param)}/>
        )
}

【讨论】：

【解决方案6】：

由于 antd Card 已经支持 onClick，您可以将这个 onClick 传递给您的自定义属性，如下所示：

// EventCard.js
import React from 'react';
import PropTypes from './propTypes';
import 'antd/dist/antd.css';
import { Card } from 'antd';

const { Meta } = Card;

const EventCard = ({
    myOnClick,
    ...restProps
}) => {
    return (
        <Card
            hoverable
            bodyStyle={{ marginBottom: "-5px" }}
            cover={<img alt="example" src="https://assetsnffrgf-a.akamaihd.net/assets/m/1102015169/univ/art/1102015169_univ_lsr_lg.jpg" />}
            onClick={() => myOnClick()}
        >
            <Meta 
                title={this.props.title}
                description={this.props.descp} />
        </Card>
    );
};

EventCard.propTypes = {
    myOnClick: PropTypes.func,
};

export default EventCard;

propTypes 在哪里：

// propTypes.js
import PropTypes from 'prop-types';

export default {
  ...PropTypes,
  ID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
};

然后你可以像这样使用它：

myClickHandler = (params) => {
    console.log("Click!!!");
});

render() {
    return (
        <EventCard myOnClick={()=> this.myClickHandler("any parameters")} />
    );
}

【讨论】：

【解决方案7】：

这对我很有效：

  <Card className={classes.root}>
      <CardActionArea
        onClick={(evt) => {
          console.log(evt.target);
          sayHi(evt);
        }}
      >
        <CardContent>
          <Typography variant="h5" component="h2">
            {props.job.label}
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions></CardActions>
    </Card>

打个招呼

  function sayHi(props) {
    history.push({
      pathname: "/another-page/",
      state: { jobId: props.job.id },
    });
  }

【讨论】：

【解决方案8】：

不可能，在这里创建onClick。您需要在Card 组件内调用onClick 事件。然后如果你需要传递一些道具，或者使用逻辑，只需将道具中的功能/内容传递给Card。类似的东西 - <Card handleClick={this.handleClickMethod} />。然后在Card 组件内部可以调用handleClick 函数。

希望对你有所帮助

【讨论】：