Как сделать компонент карты кликабельным?

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

Я пытаюсь сделать погружение (вокруг Карты) кликабельным, но Код запускается сразу после загрузки приложения, поскольку я упаковываю каждую карту в элемент списка. Как сделать компонент карты кликабельным?

Спасибо за ваш ответ:)

Answer 1

Имейте в виду, что деление интерактивного клика - очень плохая практика с точки зрения доступности, потому что без мыши вы не можете использовать табуляцию для карты или использовать клавишу ввода или пробел для щелчка по карте.

Я бы рекомендовал обернуть карту неустановленной кнопкой, чтобы вы могли воспользоваться всеми преимуществами кнопки (щелчок, вкладка, поддержка клавиатуры)

    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 2

Нет возможности сделать onClick здесь. Вам необходимо вызвать событие onClick внутри компонента Card. Затем, если вам нужно передать некоторые подпорки или использовать логику, просто передайте функцию / содержимое в подпункте Card. Что-то в этом роде - <Card handleClick={this.handleClickMethod} />. Затем внутри компонента Card вы можете вызвать функцию handleClick.

Надеюсь, что помог вам

Answer 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

Answer 4

Обратите внимание, что то, что вы присоединяете к слушателю div'а onClick, это значение, возвращаемое alert, а не функция, которая должна запускаться при каждом нажатии div.

Попробуйте изменить это:

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

К этому:

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