{react, and}如何为卡片图标创建一个可点击的事件?

Question

我目前正在研究一个react投资组合，并希望探索ant设计，我目前需要做的最后步骤之一是使动作可点击事件/href转到github。我到处都找遍了，还是想不明白。

这是当前模型

// input projects into cards
import React from 'react';

import { Card, Avatar, Tag} from 'antd';
import {GithubOutlined,LinkOutlined} from '@ant-design/icons';

const { Meta } = Card;

export function ProjectList() {

return (
<Card
style={{ width: 300 }}
cover={
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
}
actions={[
<GithubOutlined key="github" type="link">
<Tag>
<a href="https://ant.design/components/card/">
</a>

</Tag>
</GithubOutlined>,
<LinkOutlined key="link" href=""/>
]}
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title="Card title"
description="This is the description"
/>
</Card>
)
};

Answer 1

您可以做一件事，将div添加到onClick的卡外:

<div onClick={() => alert("Hello from here")}>
<Card></Card>
</div>

Answer 2

找到了，因为它是一个外部链接和图标已经是可点击的事件，你只是围绕着<a>标签的图标，它的工作。

<a href="">
<LinkOutlined key="link" href=""/>
</a>