引导卡中的 onClick 函数

Question

我需要 3 张卡片，这样当我点击其中一张时，选择会发生变化，我尝试以这种方式实现它，但是当我刷新页面时，它会记录所有 3 次点击，但更多的点击没有达到，如何实现？

import React, { Component } from 'react'
import { Card,CardGroup } from 'react-bootstrap'
import A2 from '../assets/A2example.png'
import A3 from '../assets/A3example.png'
import A4 from '../assets/A4example.png'

function portretSize(a){
    console.log(a);
}


export default class ZakazPortreta extends Component {
    render() {
        return (
            <div className = "ZakazDiv">
                <h2>Choose your preferred option:</h2>
                <CardGroup>
                    <Card>
                        <Card.Body className = "cards" onClick = {portretSize(4)}>
                            <Card.Title>А4</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">210×297 мм</Card.Subtitle>
                            <Card.Text>
                                <img src = {A4} width = "370" height = "550"/>
                            </Card.Text>
                            <Card.Link href="#">Card Link</Card.Link>
                            <Card.Link href="#">Another Link</Card.Link>
                        </Card.Body>
                    </Card>
                    <Card >
                        <Card.Body className = "cards" onClick = {portretSize(3)}>
                            <Card.Title>А3</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">297 x 420 мм</Card.Subtitle>
                            <Card.Text>
                            <img src = {A3} width = "370" height = "550"/>
                            </Card.Text>
                            <Card.Link href="#">Card Link</Card.Link>
                            <Card.Link href="#">Another Link</Card.Link>
                        </Card.Body>
                    </Card>
                    <Card >
                        <Card.Body className = "cards" onClick = {portretSize(2)}>
                            <Card.Title>А2</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted"> 420 x 594 мм</Card.Subtitle>
                            <Card.Text>
                            <img src = {A2} width = "370" height = "550"/>
                            </Card.Text>
                            <Card.Link href="#">Card Link</Card.Link>
                            <Card.Link href="#">Another Link</Card.Link>
                        </Card.Body>
                    </Card>
                </CardGroup>
            </div>
        )
    }
    
}

https://imgur.com/a/JlHpUe7

换句话说，我需要点击卡片才能 return 不同的值。

Answer 1

您正在立即调用函数。你需要这样写;

onClick={()=> portretSize(2)}

所以它等待点击。

引导卡中的 onClick 函数

function onClick in bootstrtap Card

javascript

reactjs

bootstrap-4

react-bootstrap

card