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

Question

我是 React 世界的新手。我正在使用 Ant Design 做一个简单的反应项目。我的项目中有一个下拉菜单，我有这个菜单的项目。我想在点击 items.For 示例时在屏幕上动态显示照片，当我点击选项 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 能够做到这一点。参考 link here

以后，你可以试试看下面的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 函数，这是 link 你可以简单介绍一下，看看它是如何工作的 :D

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

How can I display photos when I click dropdown items with React

javascript

drop-down-menu

reactjs

antd