web-dev-qa-db-ja.com

カードコンポーネントをクリック可能にする方法は？

私は自分のWebアプリケーションにAnt Designを使用しています。 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

ダイビング（カード周辺）をクリック可能にしようとしましたが、各カードをリストアイテムにパックするため、アプリが読み込まれた直後にコードが実行されます。カードコンポーネントをクリック可能にする方法は？

ご回答有難うございます ：）

reactjsantd
4
Niklas

DivのonClickリスナーにアタッチしているのはalertから返された値であり、divがクリックされるたびに実行される関数ではないことに注意してください。

これを変更してみてください：

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

これに：

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

これを試してください。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
2
Sidonai

私は同様の質問でここに来ました。私にとってうまくいったのは、<Card>を<Link>コンポーネントでラップすることです。また、カードのhoverableプロパティを設定すると、「クリック可能」に見える効果が得られます。例えば：

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

      // ... removed for brevity...

   </Card>
</Link>
1
Adam Cox

マウスがないと、カードにタブで移動したり、Enterキーやスペースを使用してカードをクリックしたりすることができないため、DIVクリッカブルを作成することはアクセシビリティの観点から非常に悪い習慣です。

カードをスタイルなしのボタンでラップすることをお勧めします。ボタンのすべての利点（クリック、タブ、キーボードサポート）を利用できます。

    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