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...

问题:

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>
  );
};

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.


回答1:

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>
);

Edit 1v6qxl0noq

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.


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

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

Edit r1mr7r2q2p

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


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

  • 发表于 2019-01-01 01:05
  • 阅读 ( 218 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除