在 Reactstrap 中使整张卡片可点击 [英] Making whole card clickable in Reactstrap

问题描述

我正在尝试创建一张卡片，点击后会执行操作.

I'm trying to create a card that, when clicked, performs an action.

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

I've managed to make this work by adding a button to the card, which is bound to an event handler, and works as expected.

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

I'm trying to get the whole card to work with the same event handler, as opposed to using the button, but I can't seem to get this to work as I would expect.

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

I've tried wrapping it in an <a> tag, but that also doesn't work.

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

With the example, I'd expect the card to be clickable, but actually the button still works with the event handler. I've also tried removing the button, but that doesn't make the card clickable.

推荐答案

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

Wrapping the card with an a tag will work, though, it won't have the pointer cursor without a href which can be changed easily with 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 对其进行了测试，所以如果这不起作用，那是因为回调没有像您期望的那样工作.

Tested it just now with a console.log, so if that doesn't work, it's because the callback isn't working as you're expecting it to.

另一种方法是通过传递一个 tag 属性使 Card 成为一个 a 标签.

Another way would be to make the Card an a tag by passing a tag prop.

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

所有可用的选项都在 reactstrap 的来源中明确定义代码>卡片组件.

All the options available are clearly defined in the source of the reactstrap's Card component.

我也用 Card 里面的按钮测试过，没有任何问题.

I also tested with a button inside the Card without any problems.

这篇关于在 Reactstrap 中使整张卡片可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！