gpt4 book ai didi

javascript - 使 react 组件可点击

转载 作者:行者123 更新时间:2023-12-01 23:56:28 25 4
gpt4 key购买 nike

我有一个功能性的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 标记,但这对我不起作用。有人可以帮助我了解我做错了什么吗?

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

最佳答案

您可以使用 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>

关于javascript - 使 react 组件可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62738071/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com