[英]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>
);
};
I've tried wrapping it in an <a>
tag, but that also doesn't work.我试过将它包装在
<a>
标签中,但这也不起作用。
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.
我也试过删除按钮,但这不会使卡片可点击。
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.用
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>
);
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.刚刚用
console.log
对其进行了测试,所以如果这不起作用,那是因为回调没有像您期望的那样工作。
Another way would be to make the Card
an a
tag by passing a tag
prop.另一种方法是,使
Card
的a
传递一个标签tag
的道具。
<Card tag="a" onClick={siteSelectedCallback} style={{ cursor: "pointer" }}>
All the options available are clearly defined in the source of the reactstrap's Card
component .所有可用的选项都在 reactstrap 的
Card
组件的源代码中明确定义。
I also tested with a button inside the Card
without any problems.我还用
Card
内的按钮进行了测试,没有任何问题。
In case anyone arrives here for the same question, but withreact-bootstrap's Card
, the solution is very similar.如果有人因为同样的问题来到这里,但使用react-bootstrap 的
Card
,解决方案非常相似。 However, instead of using the tag
property, you need to use as
.但是,您需要使用
as
,而不是使用tag
属性。
<Card as="a" onClick={siteSelectedCallback} style={{ cursor: "pointer" }}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.