function onClick 在 bootstrtap 卡中

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

換句話說，我需要點擊卡片來返回不同的值。

Answer 1

您正在立即調用這些函數。 你需要這樣寫；

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

所以它等待點擊。