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