如何在Ant Design (Antd)中获取Dropdown组件的值
在Ant Design (Antd)中获取Dropdown组件的值，可以通过以下步骤实现：
- 首先，确保已经安装了Ant Design的相关依赖包，并且在项目中引入了Dropdown组件。
- 在使用Dropdown组件的地方，需要定义一个状态变量来存储选择的值。可以使用React的useState钩子函数来创建一个状态变量。
- 在使用Dropdown组件的地方，需要定义一个状态变量来存储选择的值。可以使用React的useState钩子函数来创建一个状态变量。
- 在上述代码中，我们使用useState创建了一个名为selectedValue的状态变量，并将其初始值设置为null。handleMenuClick函数用于更新selectedValue的值，当用户选择了菜单项时会触发该函数。
- 在Dropdown组件的overlay属性中定义一个Menu组件，并通过onClick事件监听菜单项的点击事件。在handleMenuClick函数中，我们通过e.key获取到用户选择的值，并将其更新到selectedValue状态变量中。
- 最后，在Dropdown组件的触发元素中展示selectedValue的值。如果selectedValue有值，则显示该值；否则，显示一个默认的提示文本。
- 这样，当用户选择Dropdown组件中的菜单项时，selectedValue的值会被更新，并在界面上展示出来。
Ant Design官方文档中关于Dropdown组件的详细介绍和使用方法可以参考：Ant Design - Dropdown
相关·内容
1回答
如何根据选择的选项显示两个链接？
javascript、reactjs、gatsby、antd
我有两个键/值。基于选择，我想要显示简单的链接。如果我选择第一个选项，它将显示两个链接，当选择第二个选项时，它将显示另外两个链接。如何显示它们？ 这是我当前的代码 import React from "react"
import { Dropdown, Menu, Icon } from 'antd'
class DropOption extends React.Component {
state = {
visible: false,
};
handleMenuClick = (e) => {
浏览 12提问于2019-02-18得票数 0
1回答
如何在使用React单击下拉项时显示照片
javascript、reactjs、drop-down-menu、antd
我是第一次接触React的世界。我正在用Ant Design做一个简单的react项目。我在我的项目中有一个下拉菜单，我有这个菜单的项目。当我单击items.For示例时，我想要在屏幕上动态显示照片，当我单击选项1时，我想要一张照片出现在屏幕上。当我点击选项2时，我想要一张不同的照片出现在屏幕上。现在，当我单击它时，会弹出警报。但是我怎么才能展示照片呢。请给我一些意见。我该怎么做呢？ 这是我的代码。 import React from "react";
import { Menu, Dropdown, Button, message } from "antd"
浏览 19提问于2020-06-26得票数 0
回答已采纳
2回答
有没有办法不通过点击来关闭antd下拉菜单？
javascript、html、jquery、css、reactjs
我正在尝试实现一个具有搜索功能的Antd下拉菜单，并希望在单击外部时关闭下拉菜单。但在我的代码中，即使我点击了搜索框，在点击外部的同时，它也会切换下拉菜单的打开和关闭(这不是我们想要的)。我希望我的下拉菜单只在搜索框中有一些字符输入时才打开，如果搜索框中没有字符或在外部单击时关闭，如果我继续单击搜索框本身，下拉菜单不应该打开和关闭。有没有什么我错过的道具？以下是示例代码：
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css"
浏览 282提问于2021-06-05得票数 2
1回答
在AntD中使用覆盖属性中的自定义组件
javascript、reactjs、antd
我试图添加一个自定义右键菜单组件到菜单项.我可以通过const来完成它，但是当我使用组件时，样式似乎是错误的。有什么想法吗？
工作示例：
我的定制菜单：
import React from "react";
import ReactDOM from "react-dom";
import Dropdown from "antd/lib/dropdown";
import Menu from "antd/lib/menu";
import "antd/dist/antd.css";
export default c
浏览 0提问于2018-10-31得票数 6
回答已采纳
1回答
右击菜单触发其父菜单项的单击事件
javascript、reactjs、antd
我试图将右键菜单添加到菜单项中.我想我做到了，但是在右击菜单中单击一个项目之后，菜单项的单击操作也在启动。有什么想法吗？示例：
编辑:我的react组件代码
import React from "react";
import ReactDOM from "react-dom";
import Popup from "./Popup";
import Table from "antd/lib/table";
import Dropdown from "antd/lib/dropdown";
import Menu f
浏览 2提问于2018-10-30得票数 1
回答已采纳
1回答
设置antdesign的dropdown的默认值
reactjs、antd
我正在使用蚂蚁设计的下拉列表，但我无法激活下拉列表中的一个值。如何设置默认值？
<Dropdown
value="1st menu item"
trigger={["click"]}
className={css`
background-color: #0a3150;
height: 65px;
display: flex;
justify-content: space-between;
paddi
浏览 60提问于2019-08-04得票数 2
回答已采纳
1回答
未定义'handleMenuClick‘
reactjs、antd
我有下面的react组件，但我不确定我在这里遗漏了什么，因为函数确实是定义的，错误一定是这么简单，但找不到什么 import React, { Component } from 'react';
import { Row, Col, Tabs, Menu, Dropdown, Button, Icon, message } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components
浏览 15提问于2019-01-29得票数 0
回答已采纳
1回答
无法在Antd menu组件中突出显示当前页面上的导航菜单
reactjs、menu、next.js、antd、highlight
我正在尝试用ant design Menu commponent突出显示我当前所在页面的导航菜单项。但事实证明，无论我在哪个页面上，菜单都不会突出显示。这是我的导航菜单代码。
import React, { useState } from "react"
import Link from "next/link"
import { Layout, Menu } from "antd";
import styles from "./sidenav.module.css"
const { Sider } = Layout;
con
浏览 4提问于2021-07-29得票数 1
3回答
如何用酶检测antd滴度
javascript、reactjs、unit-testing、jestjs、enzyme
这就是我写的代码：
import {Dropdown, Menu} from 'antd';
class comp extends Component {
state = {
concept: 'Concept',
}
menuItemSelection=({key}) => {
this.setState({
concept: key
})
}
menu = (
<Menu onClick={this.menuItemSelection}&g
浏览 0提问于2018-06-29得票数 6
回答已采纳
1回答
如何使用ant设计从一个图标创建下拉菜单？
reactjs、antd
我正在尝试使用ant设计库和reactjs制作一个带有下拉菜单的用户图标。如果我使用Dropdown.Button，我会在图标周围看到一个方框。我认为这与CSS边框属性有关，但我似乎无法摆脱它。如果我使用Dropdown组件，那么我不能添加图标，只能使用文本。实现这一结果的正确方法是什么？ import { Menu, Dropdown } from 'antd';
import { UserOutlined } from '@ant-design/icons';
const Dummy = () => {
const userMenu = (
浏览 85提问于2020-07-16得票数 1
回答已采纳
1回答
反应仪表板问题
reactjs、dashboard、antd
我创建了一个React应用程序。对于仪表板样式，我使用。我不知道如何显示不同的组件，如果我点击仪表板项目，它将显示在一个画布。
我已经创建了一个搜索按钮，我也想显示结果，同样的画布。
我想做一个像这样的应用程序。
import React, { useState } from "react";
import "./App.css";
import Table from "./Table";
import AddTableComponent from "./AddTableComponent";
import { Layout
浏览 2提问于2020-03-24得票数 1
回答已采纳
1回答
要更改下拉值的React.js
javascript、reactjs、react-hooks、use-state
我尝试使用React useState来更改DropDown值的值，但它看起来像是在调用onClick之后刷新页面。例如，当我单击选项B时，它会将selectedValue状态更改为B，然后重新呈现页面并将其重置为默认值。我的问题是，为什么它会重新呈现页面？如何更改dropdown值？
import React, {useState} from 'react';
function InputDropdown(props) {
const [selectedValue, setSelectedValue] = useState("");
return (
浏览 16提问于2021-02-17得票数 0
3回答
如何在Ant Design中右对齐菜单项？
reactjs、antd
有一个开放的请求支持菜单项的对齐。在此期间，什么是正确的方式来移动一些导航栏项目(如登录，注销)到右侧？
下面是菜单的示例代码，其中所有菜单项都在左侧。
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
class App extends React.Component {
state = {
current: 'mail',
}
handleClick = (e) => {
浏览 0提问于2018-06-16得票数 22
回答已采纳
1回答
如何将数据从AntD表传递到React中的另一个组件？
javascript、reactjs、antd
我正在使用AntD创建我的react应用程序。因此，我希望将数据从表(父级)传递到另一个组件(子级)。这是parent ClassTheoryDataTable.jsx import React, { useEffect, useState } from 'react';
import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button } from 'antd';
import ClassTheoryDetails from './Cla
浏览 51提问于2021-08-03得票数 0
1回答
我正在尝试让Ant设计库中的按钮在进行api调用时显示微调器动画。 这是按钮https://ant.design/components/button/ (加载按钮) 此外，我一直在尝试将其转换为功能组件。 import React, { useState, useEffect, useContext } from 'react';
import { AppContext } from '../../AppContext';
import { Button } from 'antd';
import { RetweetOutlined, Glob
浏览 10提问于2021-04-06得票数 0
回答已采纳
3回答
如何从预定义对象呈现Ant设计图标
javascript、reactjs、antd
我有一个文件，它列出了如下所示的菜单项
import React from "react";
import { Link, useRouteMatch } from "react-router-dom";
import {
HomeOutlined,
ProjectOutlined,
DatabaseOutlined,
RocketOutlined,
SettingOutlined,
FormatPainterOutlined,
} from "@ant-design/icons";
import { Menu } fr
浏览 1提问于2020-09-29得票数 0
回答已采纳
3回答
警告:函数无效，因为如果从render返回组件而不是<Component child.This，则可能会发生React />
javascript、reactjs
当我尝试显示{props.child}.The page remains blank.The detailed时出现上述错误
index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in div (at CustomLayo
浏览 0提问于2020-02-28得票数 0
2回答
我代码中的this.props.children不起作用。也就是说，它没有在另一个js文件中显示内容
reactjs、development-environment
所以，基本上，我的代码中的this.props.children不起作用。也就是说，它没有在另一个js文件中显示内容。有一个文件defaullayout.js，它有一个内容部分，以便在页面hompage.js中显示layou。因此，我试图在主页中给{this.prop.children} in内容以显示defaltlayout页面，但整个页面显示为空白。请帮帮我，this.Thank你！
这是我第一页的代码“Here是DefaultLayout.js”
`
import React, { useState } from 'react';
import {
MenuFoldO
浏览 8提问于2022-11-28得票数 1
回答已采纳
1回答
Ant下拉列表-子菜单中的访问道具值[ React ]
javascript、reactjs、antd、react-props
我有一个类似facebook提要的帖子列表，每个帖子都有一个下拉列表，上面写着“编辑、删除、报告”。
我使用，问题是我无法访问子菜单中的道具值"DeleteId“。
但是我可以访问组件内部的道具值(deleteId)。
根据Ant ，子菜单(菜单)是在组件之外声明的。
//-------------- Outside Component --------------------
const onClick = function (info) {
console.log(info)
};
const menu = (
<Menu onClick={onClick}&g
浏览 0提问于2018-09-13得票数 1
回答已采纳
2回答
如何在Antd库中将道具从菜单传递到菜单项？
reactjs、antd
我使用Antd推荐的最新方法构建菜单()。但官方文件并没有提供如何传递道具的方法。我希望将project.id从菜单组件传递给menuItems，因此menuItems中的“编辑”和“删除”可以接受project.id并触发不同的功能。我想问问有没有办法通过道具。
import styled from '@emotion/styled';
import { ListProps } from '../types';
import { Table, Dropdown, Menu, Button } from 'antd';
import dayjs
浏览 18提问于2022-10-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
