当我使用 React 单击下拉项时如何显示照片

Question

我是 React 世界的新手。我正在用Ant Design做一个简单的反应项目。我的项目中有一个下拉菜单，并且我有此菜单的项目。我想在单击项目时在屏幕上动态显示照片。例如，当我单击选项 1 时，我希望屏幕上出现一张照片。当我单击选项 2 时，我希望屏幕上出现不同的照片等......现在单击它时会弹出警报。但是我该如何显示照片。请给我意见。我该怎么办？

这是我的代码。

import React from "react";
import { Menu, Dropdown, Button, message } from "antd";
import "./SingleDropdown.css"
function SingleDropdown() {
function handleMenuClick(e) {
message.info("Image showed");
console.log("click", e);
}
const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1">
Option 1
</Menu.Item>
<Menu.Item key="2">
Option 2
</Menu.Item>
<Menu.Item key="3">
Option 3
</Menu.Item>
</Menu>
);
return (
<div className="singledropdown">
<Dropdown overlay={menu}>
<Button className="button-color">
Dropdown
</Button>
</Dropdown>
</div>
);
}
export default SingleDropdown;

Answer 1

你的antd能够做到这一点。 请参阅此处的链接

将来，您可以尝试查看下面的API，我认为这有助于:D

另一方面，你可以尝试在 React 中onClick函数，因为我使用 react-bootstrap 它工作了，我认为antd也能够处理它。

我正在尝试做的是这样的：

const menu = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" onClick={this.showPic1}>
Option 1
</Menu.Item>
<Menu.Item key="2" onClick={this.showPic2}>
Option 2
</Menu.Item>
<Menu.Item key="3" onClick={this.showPic3}>
Option 3
</Menu.Item>
</Menu>
);

*向您展示一些示例 它是如何工作的

onClick是一个 React 函数，这是您可以简要介绍一下的链接，看看它是如何工作的:D