使反应组件可点击答案

【问题标题】：Making a react component clickable使反应组件可点击
【发布时间】：2020-10-25 12:22:50
【问题描述】：

我有一个功能性的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 的帖子，其中谈到了使用锚标记，但这对我不起作用。有人可以帮我理解我做错了什么吗？

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

【问题讨论】：

请解释您当前实现的行为。
@tushar 我当前的组件是一个子组件，用于格式化评论网站上的列表。所以我将一些数据传递给这个组件，它会将一个格式化的组件返回给父组件。
好吧@Vik G。现在，卡片组件的哪些元素是可点击的？
目前卡片上没有可点击的内容，我正在尝试让整张卡片都可点击。
可以将顶级 div 与 onClick 一起使用，如果这会影响样式，请将内部 Card 组件与另一个 div 包装在一起，并给它一个 prop onClick。

标签： javascript reactjs react-bootstrap

【解决方案1】：

您可以在顶层 div 元素上使用 onClick onClick，财产。

比如：

        <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>

【讨论】：

【解决方案2】：

最好用锚标签包裹它，因为可点击的东西如果去到地方应该是链接，如果他们做事应该是按钮。将点击处理程序与其他事物一起使用只会使事物无法访问。

【讨论】：

这应该是一条评论