在 Reactstrap 中使整张卡片可点击

jmo*_*jmo 4 javascript twitter-bootstrap reactjs reactstrap

我正在尝试创建一张卡片,单击该卡片时会执行操作。

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

我试图让整张卡使用相同的事件处理程序,而不是使用按钮,但我似乎无法像我期望的那样工作。

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>
  );
};
Run Code Online (Sandbox Code Playgroud)

我试过将它包装在一个<a>标签中,但这也不起作用。

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

Emi*_*ron 8

a标签包裹卡片会起作用,但是,如果没有href可以使用 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>
);
Run Code Online (Sandbox Code Playgroud)

编辑 1v6qxl0noq

刚刚用 a 对其进行了测试console.log,所以如果这不起作用,那是因为回调没有像您期望的那样工作。


另一种方法是通过传递一个道具来制作Card一个a标签tag

<Card tag="a" onClick={siteSelectedCallback} style={{ cursor: "pointer" }}>
Run Code Online (Sandbox Code Playgroud)

编辑 r1mr7r2q2p

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


我还用里面的按钮测试过,Card没有任何问题。

  • 正如您所指出的,问题不存在于“onClick”标记中,而是存在于回调方法中。事件的上下文在卡上时发生变化 - 我更改了函数以传递所选对象,而不是尝试从事件对象中提取信息。感谢您的帮助! (2认同)

Ren*_*ack 6

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

<Card as="a" onClick={siteSelectedCallback} style={{ cursor: "pointer" }}>
Run Code Online (Sandbox Code Playgroud)

  • 运作良好并解决问题;然而,`as="a"`似乎使卡片中的任何文本看起来都像一个链接,一旦我删除它,事情看起来就完美了:-) (2认同)