在 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

用a标签包裹卡片会起作用，但是，如果没有可以使用 CSS 轻松更改的href ，它不会有指针光标。

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

所有可用的选项都在 reactstrap 的Card组件的源代码中明确定义。

---

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

Answer 2

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

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