在 Reactstrap 中使整张卡片可点击

Question

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

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

我试图让整个卡片使用相同的事件处理程序，而不是使用按钮，但我似乎无法像我期望的那样工作。

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> 标签中，但这也不起作用。

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

Answer 1

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

<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 里面的按钮测试过没有任何问题。

Answer 2

万一有人来到这里是为了同样的问题，但是react-bootstrap's Card，解决方案非常相似。但是，您需要使用 as.

而不是 tag 属性

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

在 Reactstrap 中使整张卡片可点击

Making whole card clickable in Reactstrap

javascript

twitter-bootstrap

reactjs

reactstrap