使整个卡在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

万一有人问到同样的问题，但是有了react-bootstrap's Card，解决方案就非常相似。但是，您无需使用tag属性，而需要使用as。

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

Answer 2

使用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对其进行了测试，因此，如果该方法不起作用，那是因为该回调未按预期运行。

---

另一种方法是通过传递Card道具使a成为tag标签。

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

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

---

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