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

尝试一下，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

Answer 3

也许这会有所帮助：

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

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

Answer 4

我来这里时也遇到类似的问题。对我有用的是用IndexError: list index out of range组件包装import requests from lxml import html # url to scrape data from link = 'https://www.boi.org.il/currency.xml?curr=01' # path to particular element path = '/CURRENCIES/LAST_UPDATE' response = requests.get(link) byte_string = response.content # get filtered source code source_code = html.fromstring(byte_string) # jump to preferred html element tree = source_code.xpath(path) # print texts in first element in list print(tree[0].text_content())。另外，在卡上设置<Card>属性将使其具有“可单击”的效果。例如：

<Link>

Answer 5

由于蚂蚁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")} />
    );
}

Answer 6

这对我来说很好：

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

Answer 7

在可访问性方面，请牢记使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;
    }

Answer 8

无法在此处制作onClick。您需要在onClick组件内调用Card事件。然后，如果您需要传递一些道具或使用逻辑，只需将道具中的函数/内容传递给Card。这样的东西-<Card handleClick={this.handleClickMethod} />。然后在Card组件内部，可以调用handleClick函数。

希望对您有帮助

如何使Card组件可点击？

8 个答案: