javascript - 使 react 组件可点击

Question

我有一个功能性的REACT组件，代码如下

const MobileListing = (props) => {

    function handleClick() {
        console.log('in cardClick');
    } 
    return (
        <div>
            <Row>
                <Card onClick={() => handleClick()} style={{cursor : 'pointer'}} >
                <Card.Img variant="top" src="holder.js/100px180" />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
                </Card>
            </Row>
        </div>
    );
}

export default MobileListing;

我想让整张卡片都可以点击。我通读了一篇关于堆栈溢出的帖子 Making whole card clickable in Reactstrap其中谈到使用 anchor 标记，但这对我不起作用。有人可以帮助我了解我做错了什么吗？

我网站上的一张卡片看起来像这样，我想让整张卡片都可以点击。

Answer 1

您可以使用 onClick在顶层 div元素，或者，如果 Row 中会有更多卡片你可以用 div 包裹每个并给它 onClick , 属性(property)。

比如:

        <div>
            <Row>
              <div onClick={handleClick}>
                <Card style={{ width: '18rem', cursor : 'pointer' }} >
                <Card.Img variant="top" src="holder.js/100px180" />
                <Card.Body>
                    <Card.Title>Card Title</Card.Title>
                    <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
                </Card>
              </div>
            </Row>
        </div>