在 Reactstrap 中使整张卡片可点击

Posted 2023-03-23

【中文标题】在 Reactstrap 中使整张卡片可点击

【英文标题】：Making whole card clickable in Reactstrap

【发布时间】：2019-05-27 04:06:32

【问题描述】：

我正在尝试创建一张卡片，当点击它时会执行一项操作。

我已经设法通过向卡片添加一个按钮来完成这项工作，该按钮绑定到一个事件处理程序，并按预期工作。

我试图让整张卡片与同一个事件处理程序一起工作，而不是使用按钮，但我似乎无法按预期工作。

const SiteCard = props => 
  const  site, siteSelectedCallback  = props;

  return (
    <Card onClick=siteSelectedCallback className="card-item">
      <CardBody>
        <CardTitle>site.name</CardTitle>
        <CardText className="text-muted">site.address</CardText>
        <Button color="primary" className="float-right" value=site.id>
         CHOOSE ME
        </Button>
      </CardBody>
    </Card>
  );
;

我尝试将其包装在 <a> 标记中，但这也不起作用。

在示例中，我希望卡片是可点击的，但实际上该按钮仍可与事件处理程序一起使用。我也试过删除按钮，但这并不能使卡片可点击。

【问题讨论】：

用<a onClick...>标签包裹卡片？

@EmileBergeron 也不能使其可点击 - 我希望它也能工作，但似乎没有。

它应该可以工作，虽然链接上没有href，光标不会改变。

@EmileBergeron 拥有href 会更改光标并在文本下划线，但单击仍然没有任何作用。我已经尝试过使用和不使用href，但都不起作用

我已经测试了 2 种不同的方法使其与我的答案中的 a 标记一起使用，我在其中提供了代码沙箱，您可以在其中玩弄我的示例。

【参考方案1】：

请注意，在Card 组件上添加onClick 足以使其可点击。通过样式更改cursor 会使用户更明显。

<Card onClick=onClick style= cursor: "pointer" >
  <CardBody>This is a clickable card.</CardBody>
</Card>

用a 标签包裹卡片也可以，但是没有href 的指针光标也可以用CSS 轻松更改。

const SiteCard = ( site, siteSelectedCallback ) => (
  <a style= cursor: 'pointer'  onClick=siteSelectedCallback>
    <Card className="card-item">
      <CardBody>
        <CardTitle>site.name</CardTitle>
        <CardText className="text-muted">site.address</CardText>
      </CardBody>
    </Card>
  </a>
);

刚刚使用console.log 对其进行了测试，所以如果这不起作用，那是因为回调没有按照您的预期工作。

---

另一种方法是通过传递 tag 属性使 Card 成为 a 标记。

<Card tag="a" onClick=siteSelectedCallback style= cursor: "pointer" >

所有可用选项都在source of the reactstrap's Card component 中明确定义。

---

我还用Card 内的按钮进行了测试，没有任何问题。

【讨论】：

正如您所指出的，onClick 标记中不存在问题，但回调方法中存在问题。在卡片上时，事件的上下文会发生变化 - 我已更改函数以传递所选对象，而不是尝试从事件对象中提取信息。感谢您的帮助！

【参考方案2】：

如果有人因为同样的问题来到这里，但使用react-bootstrap's Card，解决方案非常相似。但是，您需要使用as，而不是使用tag 属性。

<Card as="a" onClick=siteSelectedCallback style= cursor: "pointer" >

【讨论】：

效果很好，解决了问题；但是，as="a" 似乎使卡片中的任何文本看起来都像一个链接，一旦我删除它，事情似乎很完美:-)

我们甚至不需要使用as='a' 属性，因为无论如何我们都需要实现onClick 属性。