web-dev-qa-db-fra.com

Comment rendre le composant Carte cliquable?

J'utilise Ant Design pour ma WebApp. Pour le Card , il y a un accessoire hoverable qui rend les coutures de la carte cliquables mais il n'y a pas d'accessoire onClick. Comment le rendre vraiment cliquable?

Voici mon code:

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

J'essaie de rendre une plongée (autour de la carte) cliquable, mais le code s'exécute immédiatement après le chargement de l'application, car j'emballe chaque carte dans un élément de liste. Comment rendre le composant Carte cliquable?

Merci pour votre réponse :)

reactjsantd
4
Niklas

Notez que ce que vous attachez à l'écouteur onClick du div est la valeur renvoyée par alert et non en fait une fonction qui doit être exécutée chaque fois que le div est cliqué.

Essayez de changer ceci:

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

Pour ça:

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

Essayez ceci, onClick attend une fonction et invoque lorsque render () est exécuté.

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
2
Sidonai

Je suis venu ici avec une question similaire. Ce qui a fonctionné pour moi, c'est d'envelopper le <Card> avec un <Link> composant. De plus, la définition de la propriété hoverable sur la carte lui donnera un effet qui la fera apparaître "cliquable". Par exemple:

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

      // ... removed for brevity...

   </Card>
</Link>
1
Adam Cox

Gardez à l'esprit que rendre un div cliquable est une très mauvaise pratique en termes d'accessibilité, car sans souris, vous ne pouvez pas taper sur la carte ni utiliser Entrée ou Espace pour cliquer sur la carte.

Ma recommandation serait d'envelopper la carte avec un bouton sans style, afin que vous puissiez profiter de tous les avantages d'un bouton (clic, onglet, prise en charge du clavier)

    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;
    }
0
Yichaoz