React JS -多级下拉菜单
React JS是一个用于构建用户界面的JavaScript库。它被广泛应用于前端开发，并且可以实现高效、可扩展和可重用的用户界面组件。
多级下拉菜单是一种常见的用户界面设计模式，用于在用户点击菜单选项后显示下一级选项。React JS可以轻松地实现多级下拉菜单功能。
React JS中实现多级下拉菜单的一种常见方式是使用React组件和状态管理。首先，需要创建一个菜单组件，该组件包含一个包含所有菜单项的状态数组。然后，可以通过映射状态数组来动态渲染菜单选项。当用户点击菜单选项时，可以根据选项的ID值更新状态，并根据选项的ID值显示下一级菜单选项。
React JS的优势在于其声明性编程模型，使得构建和管理复杂用户界面变得简单和直观。它还具有虚拟DOM和组件化的特性，可以提高性能和可维护性。
在腾讯云中，推荐使用腾讯云云开发（CloudBase）来支持React JS的开发和部署。云开发提供了全栈云开发能力，包括前端开发、后端开发、数据库、存储和部署等。使用云开发可以方便地构建和部署React JS应用，并且具有高可用性和扩展性。
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
总结：React JS是用于构建用户界面的JavaScript库，可以实现多级下拉菜单功能。腾讯云云开发是推荐的支持React JS开发和部署的解决方案。
相关·内容
我正在使用下面的代码
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown'
但是我找不到像这样的多级下拉菜单
My-Menu
menu-1
menu-1-a
menu-1-b
menu-2
menu-3
m
浏览 5提问于2020-04-30得票数 5
1回答
我想用Firebase数据库更新pickingStatus，我不知道怎么做。这是DB结构。我用的是反应。
我可以通过下面的查询获得信息。
ordersDb.child("-MCPA88ehpQPnavBRMcD/order_products/").orderByChild('productId').equalTo("gid://shopify/Product/5327606775964")
.on(
'value',
snapshot => {
console.log
浏览 5提问于2020-07-17得票数 1
回答已采纳
1回答
我正在尝试实现多级嵌套下拉菜单。我使用了"react-dropdown“。出现了一个新的下拉列表，因此就在下面显示。但是我无法实现嵌套的dropdown。
import React from "react";
import Dropdown from "react-dropdown";
import 'react-dropdown/style.css';
const object = [
{value: 'course',
lable: "course" ,
submenu
浏览 23提问于2020-02-15得票数 0
回答已采纳
我正在使用React和Redux为下拉菜单构建一个动态子菜单。计划是，当用户单击下拉菜单时，将进行API调用，并根据API的响应创建一个子菜单。这是我的下拉菜单文件
MainMenu.js
import React, {useEffect} from 'react'
import CreateSubMenu from './utils/CreateSubMenu.js'
import fetchSubMenuData from './actions/submenuAction.js'
function getSubMenu(menu, leve
浏览 4提问于2021-04-16得票数 1
回答已采纳
1回答
我想做一个多级下拉菜单，类似于这个XKCD中的菜单：
有什么方法可以像这样使用Bokeh下拉菜单来折叠子类别吗？
我的问题不同于，因为我想要一个具有多个级别的下拉菜单，而不是N个独立的、相互依赖的下拉菜单。我也不打算把这个下拉在笔记本上。
浏览 1提问于2018-04-17得票数 0
回答已采纳
2回答
我为我的网站创建了一个定制的主题。这里我想创建一个多层次的下拉菜单，我使用仪表板完成了它，但是只有下拉菜单出现了。
浏览 2提问于2015-04-16得票数 0
回答已采纳
我最近在我的react项目中使用了antd样式包。然而，我面临着一个与here 中提出的问题类似的问题。
然而，我不能翻译他们提供给我的项目的解决方案。下面是我的代码：
NotificationMenu
export class NotificationMenu extends Component {
###some business logic when mounting component########
render() {
const dropdownmenu = ( #<-------- Over here i am in
浏览 15提问于2020-05-18得票数 0
我想在Bootsrap 3和Wordpress中创建一个多级下拉菜单，我需要一些帮助。我甚至不知道这是否可能，因为如果我读了navwalker的手册，它说下拉菜单只支持一个孩子，因为移动优先的方法。
尽管如此，我认为我应该可以通过检查这个网站：
不幸的是，当我编辑第118行时，在我的例子中，下拉菜单不起作用，顶部的导航项目上的插入符号也不见了。
我认为已经有更多的人参与了这项工作，所以必须有一个选择来让它工作。
希望有人能帮我解决这个问题。
在进阶时谢谢！
罗兰
浏览 2提问于2013-10-21得票数 0
我正在使用创建下拉菜单。但是，我想动态地创建菜单。React应用程序将查询API服务器中的JSON代码，并将从中构造一个菜单。我正试图找到一种将JSON代码转换为HTML/JSX代码的方法：
从API中检索到的JSON代码如下所示：
{
"module_type": "menu",
"title": "My Site",
"menu": [
{
"link": "/
浏览 1提问于2018-09-15得票数 6
回答已采纳
1回答
多级选择输入
、、
我认为一个例子最能说明我的问题。假设我有一个表单来选择书籍和它们的页面。用户将有一个多选择下拉菜单来选择书籍。然后，从每本书中，用户可以选择任意数量的页面。最后，数据将看起来像一个二维数组。顶层是所选书籍的数组，第二级是为每本书选择的页面：
books: {
"Book 1": ["page1", "page2", "page3"],
"Book 2": ["page1", "page2"]
}
书的下拉框将自动填充。下拉菜单选择书籍页面的选项将在加载时填充。
下面是一个硬编
浏览 2提问于2016-12-22得票数 4
回答已采纳
2回答
我试图创建“下拉菜单”的反应。我在onMouseEnter和onMouseLeave事件中使用了onMouseLeave内部函数(在下拉列表持有者-us div /NaviMain中)来切换“下拉菜单”的display。最后一件事是在单击DropdownMenuItem.时使“下拉菜单”消失。有人能告诉我如何做到这一点吗？
App.js
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import NaviMain from "./components/NaviMain
浏览 5提问于2022-04-01得票数 0
回答已采纳
我使用semantic-ui-react下拉菜单在我的页面上创建了一个语言选择下拉菜单，如下所示。 📷 js代码如下所示。 import React from "react";
import {CustomDropListStyle} from './style.js'
import { Dropdown } from 'semantic-ui-react'
const options = [
{
key: 'English',
text: 'English',
浏览 5提问于2019-04-17得票数 1
回答已采纳
我想知道如何在下拉菜单中显示MySQL表数据中的表。单击下拉菜单时，应该加载MySQL表中的数据。
这是我的前端代码。
Main.js
import React, { Component } from 'react';
export class Main extends Component {
render() {
return (
<select type="select" >
<option selected>Select ID</option>
浏览 2提问于2021-08-11得票数 0
0回答
多级下拉列表不起作用
、、、
我是一个新的前端开发人员。我正在尝试添加一个多级下拉菜单使用bootstrap。这是我在互联网上找到的Haml代码。当我点击Header 4时，我可以看到第一级下拉菜单，但是如果我点击Sub Heading 1，它不会显示第二级下拉菜单，而是关闭父级下拉菜单。
%nav.navbar.navbar-inverse.sidebar
.container-fluid
%a.navbar-brand{:href => "#"} API Reference
#bs-sidebar-navbar-collapse-1.collapse.navbar-collap
浏览 5提问于2017-06-21得票数 0
1回答
我在我的页面上有一个下拉菜单，但有一些问题，即当下拉菜单出现并向下移动到一定的限制时，它将消失，如图所示。
1)当移动应用程序开发的下拉菜单出现时，如图所示，并向下移动到黑莓，但当我将鼠标指针移动到Palm时，菜单消失了。
css代码是
/* menu styles */
nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
nav a{
display:block;
padding
浏览 0提问于2011-03-02得票数 0
回答已采纳
1回答
我想使用jquery构建一个下拉菜单，使用click事件，而不是hover事件。我在编码中想到的是适当地工作，有没有其他执行多级下拉菜单的快捷方法
var initMenu = {
show: function() {
$('#left_dropbar ul ul').hide();
$('#left_dropbar ul:first').show();
$('#left_dropbar li a').click(function() {
var checkClick = $(t
浏览 0提问于2012-02-17得票数 0
回答已采纳
1回答
这是下拉菜单上的小提琴曲。如果你点击任何链接，它实际上会带你到我正在处理的主页。如果你试着点击“人类实践”下的子菜单，什么都不会出现。
请帮忙，我不明白为什么没有生成子菜单.非常感谢。
Here is the fiddle:
以下是与在人工实践中创建子菜单问题的直接链接：
浏览 1提问于2015-09-15得票数 0
回答已采纳
我正在设计一个简单的网页，其中有按钮，让用户到一个新加载的网页。我不知道如何让组件出现在这个新页面上。对于所有组件，我都有单独的.js文件(例如: RideForm.js保存代码以在屏幕上呈现一个功能下拉菜单)，因此，例如，如果我想单击“计划您的旅程”按钮，并在该页面上加载一个新页面，并在其中加载下拉菜单，我将如何将其添加到代码中？
//PlanButton.js
import React from 'react'
import { Redirect } from 'react-router-dom'
import DropDownMenu from "
浏览 0提问于2019-04-30得票数 0
回答已采纳
1回答
我有一个有效的“下拉菜单”-点击“菜单项”路由到另一个组件。我希望在单击后更改“下拉菜单项”的样式，因此下一次“下拉菜单”打开时，已单击的“项目”具有不同的外观--指示活动状态。
我想要复制的行为可以在我正在重写的页面上观察到：，单击项目后，从黑色菜单下拉按钮(有用的ST)，“菜单项”改变颜色为蓝色。
DropdownMenu
import { useState } from "react"
import { MenuItemContentSchool } from "./sub-components/MenuItemContentSchool"
import
浏览 8提问于2022-04-01得票数 0
我有一个问题，由于一些后勤原因，我不能测试它，并亲自查看，所以我问你:)
我在wordpress中有一个多级导航，顶层页面有内容，当你点击它时，应该可以访问它。悬停时会显示下拉菜单。
我的问题是:这在没有悬停状态的移动设备上会有什么表现？在第一次点击下拉菜单时，会启动还是会将用户带到顶层项目后面的链接？
谢谢!
浏览 3提问于2013-09-26得票数 0
1回答
在语义下拉列表上触发多个事件
、、、、
我正在尝试实现以下行为。单击下拉菜单时，树应该显示为一个选项，并且对树的任何操作都应该使下拉菜单保持打开状态。它应该只在再次单击下拉菜单和外部单击时关闭。我使用的是onClick、onClose和onOpen处理程序。但不知何故，onclick和onclose是冲突的。有人能帮我实现这一点吗？ 沙盒：https://codesandbox.io/s/semantic-ui-react-so-yzemk?file=/index.js import React from "react";
import { render } from "react-dom";
im
浏览 9提问于2020-07-26得票数 0
回答已采纳
我希望价格道具通过Main.js改变其货币符号，并根据我从Navbar.js下拉菜单中选择的货币调整其价格。例如，我的默认货币是美元，所以第一个主产品的价格是“149美元”，如果我从Navbar主产品价格的下拉菜单中选择“EUR(欧元)”，应该更改为“欧元(149除以或乘以欧元汇率)”。以下是代码：
App.js：
import './App.css'
import Main from './components/Main';
import Top from './components/Top';
export default function
浏览 12提问于2022-10-25得票数 1
回答已采纳
我使用的是React &React路由器，0.13.3和React widgets 3.1.0，它们都安装了bower；以及用于构建的早午餐。
在一条路线上，我创建了一个下拉列表，就像：
render: function()
{
var trylist = ['pink', 'red', 'blue', 'white' ];
var DropdownList = ReactWidgets.DropdownList;
return (<DropdownList defaultValue="red&
浏览 2提问于2015-11-30得票数 2
有没有可能通过使用twitter bootstrap 2的元素来拥有一个多级下拉菜单？原始版本没有这个功能。
浏览 2提问于2012-03-18得票数 92
回答已采纳
我是第一次使用React Js的多选下拉菜单，我使用了"npm install react-multi-select-component“插件，但我的onSelect不工作。
<Multiselect
showCheckbox={true}
options={this.state.options} // Options to display in the dropdown
selectedValues={this.state.selectedOption} // Preselected value to persist in dropdown
浏览 0提问于2020-04-24得票数 0
1回答
悬停多级下拉列表
、、
我正在尝试创建一个带有子菜单的下拉菜单，当我悬停鼠标时，它将打开，但子菜单一直显示在底部，而不是它的父菜单的右侧。
<li class="dropdown">
<a href="#" class="navbar-brand" data-toggle="dropdown">News <strong class="caret"></strong></a>
<ul class="dropdown-menu">
浏览 3提问于2017-05-09得票数 4
我有一个下拉菜单与2个级别。将鼠标悬停在level 1上时，它会成功打开level 2，但是，当我的鼠标从level 1移动到level 2时，整个菜单都会消失。(下拉菜单显示在悬停状态)
基本上，我想要实现的是悬停在二级下拉菜单上，让整个下拉菜单不会消失，并允许用户点击二级链接。
下面是我的HTML以供参考：
<ul class="link">
<li class="level-one-link">
<a href="" class="link-name">
LEV
浏览 3提问于2018-05-20得票数 0
1回答
我是非常新的react.js。我使用react-select作为下拉菜单，并带有一个用于onClick操作的按钮。我在获取要动态更新的URL时遇到了问题。例如，用户在下拉菜单中选择Netflix，然后单击选择按钮，它会将他们重定向到Netflix URL。如何使用带按钮的react-select动态更新URL链接。 import Select, { components } from 'react-select';
import { Link } from "gatsby"
import homePageStyles from './home-page
浏览 17提问于2020-04-12得票数 0
1回答
我有一个下拉菜单在引导3，与一个自定义的子菜单。我正在尝试添加与原始下拉列表相同的行为。基本上，为了能够单击子菜单下拉菜单并关闭它，现在它只是打开，但是当您试图通过单击相同的链接关闭它时，它不会做任何事情。
我试着崩溃了，但是我没有成功，我设置了一个js小提琴来向你们展示我到目前为止所拥有的一切。
这个.js代码允许我在不添加自定义类的情况下拥有多个下拉菜单，我一直试图修改它，但没有成功。
$('.dropdown-submenu').click(function(){
$(this).children('.dropdown-menu').css('
浏览 0提问于2014-07-12得票数 0
回答已采纳
我正在React.js中构建自定义拼写检查器，并且我被困在更改下拉菜单中的单词以选择正确的单词。请帮帮忙。 我对它做了很长时间的研究，但没有结果。
浏览 16提问于2019-04-08得票数 0
回答已采纳
1回答
多级下拉菜单引导
、、、、
我正在尝试创建一个多级下拉菜单，但不是很远，我想要的是在下拉菜单中有：
1.one menu option
- sub-menu option
- sub-menu option
- sub-menu option
2.another menu
- sub-menu option
等
主菜单中最多有4个选项，每个菜单项都有子菜单。
到目前为止，我的情况如下：
<div class="container">
<div class="dropdown">
<button class=
浏览 2提问于2017-05-24得票数 0
回答已采纳
我需要在使用Material的模式弹出窗口中构建一个下拉菜单。
我在我的模态窗口中下拉菜单，作为一个值，我看到最后一项是“第三项”，当我想选择“第一项”时，它不起作用，菜单中的最后一项仍然是一个值
我有两个文件App.js和list.js
App.js代码：
import React, { Component } from 'react';
import './App.css';
import {AppButtons} from './components/button'
import {AppList} from './compon
浏览 0提问于2018-03-21得票数 0
回答已采纳
我有一个简单的工具条下拉菜单。我想要下拉菜单在点击时切换。为此，我使用了data-target属性。但它并没有像预期的那样工作。
<div className="dropdown">
<span className="dropdown-toggle" data-toggle="collapse" data-target="#target">Toggle Dropdown</span>
<ul id="target" className="colla
浏览 4提问于2017-11-24得票数 0
我正在尝试建立一个新冠肺炎跟踪应用程序使用的反应和物化CSS框架。我正在尝试使用外部API获取一些数据，并将它们放入下拉菜单中。我可以console.log的结果，它是好的。但当我尝试将数据放入下拉菜单时，下拉菜单没有响应。当我尝试用硬编码的值时，它工作得很好。
这是我的App.js。我除了App.js没有任何组件
import React, { Component } from "react";
import "./App.css";
import "materialize-css/dist/css/materialize.min.css";
浏览 1提问于2020-08-02得票数 0
回答已采纳
这是一个React JS应用程序。该字段将只允许三个可能的选项:贷方、借方。不应该允许其他任何东西。 这是我的JS代码... <AutoCompleteInput
name="type"
required="required"
defaultValue={type}
pattern="\bCREDIT\b|\bDEBIT\b"
maxLength="6"
title
浏览 23提问于2020-01-21得票数 0
0回答
较长网页上的下拉列表
、、、、
我想要呈现一个像一样的下拉菜单，这样当下拉菜单出现时，它会覆盖整个网页，移除滚动条，并卸载(？)网页的其余部分，但在此过渡期间，您仍然可以看到整个网页。我如何才能实现这个特性呢？有没有什么方法可以卸载元素，但仍然显示它们一段时间？谢谢!请查看下面的代码片段，了解与我目前正在工作的内容类似的内容。
class Comp extends React.Component {
constructor() {
super();
this.state = {
clicked: false,
divId: "off"
}
thi
浏览 0提问于2017-12-04得票数 0
回答已采纳
我使用material-ui v3.1.2和react js v16.5.2。在我的页面中，有很多地方我使用了带有select属性的<TextField>。因此，每当我点击TextField，当下拉菜单出现时，它就会隐藏我的父级垂直滚动条，导致一些ui在隐藏滚动条时向右移动。我不希望这种情况发生，所以任何解决方案都会有很大的帮助。
这是打开下拉菜单之前的屏幕截图，
这是打开下拉列表后的屏幕截图，
浏览 1提问于2018-12-19得票数 2
我一直在查看可用的响应式下拉菜单/导航栏，但似乎什么都不能正常工作。我主要需要一个基于CSS的菜单，不依赖于JavaScript黑客。
为什么不使用JS？基于JS的解决方案无法在Opera Mini这样的代理浏览器上工作，我们的大多数用户都在使用它，而且Blackberry浏览器在JS上的表现也不是很好。
很多人提倡在移动导航中使用选择菜单。这是一个有趣的解决方案，但这同样依赖于JS，并且对于嵌套的多级菜单来说非常繁琐。
那么，你遇到过哪些可能对你有用的导航系统呢？
浏览 2提问于2012-09-26得票数 9
我正在用reactjs构建我的最终项目视图。我正面临着几个麻烦，我想要好的方法来解决这些问题。
要创建下拉菜单、标签、手风琴、弹出窗口、模态等，我们应该使用React状态或纯JS长代码来切换类。有没有针对这些特定任务的js库？
何时使用对象以及何时为状态使用数组。
浏览 12提问于2017-08-26得票数 0
回答已采纳
我正在使用jquery选择的插件。在jquery中选择的可以显示下拉列表，如
-选择--
main manu1
menu1
menu2
main manu2
menu3
menu4
但是我想显示下拉菜单
-选择--
main menu1
submanu1
menu1
menu2
main menu2
submanu2
menu1
menu2
有可能吗？请帮帮我。
浏览 4提问于2013-02-04得票数 2
1回答
我有一个功能组件Profile.js，在屏幕的标题上我放了一个按钮。一旦按下这个按钮，我想从中显示一个下拉菜单
我的Profile.js的一部分
function Profile(props) {
useLayoutEffect(() => {
props.navigation.setOptions({
headerRight: () => <HeaderRight />,
});
}
}, []);
我的HeaderRight组件：
export const HeaderRi
浏览 3提问于2021-09-27得票数 1
回答已采纳
我试图使用ref自动聚焦语义ui react下拉菜单中的输入，但由于某些原因它不起作用。另外，当dropdown打开时，输入应该是自动聚焦的。这是代码沙箱链接。非常感谢你，https://codesandbox.io/s/semantic-ui-example-forked-5wrlp?file=/example.js
浏览 18提问于2021-09-05得票数 0
1回答
我有一个下拉菜单，它会在点击时展开，而不是悬停。问题是，当我打开子菜单时，当我把鼠标从当前的子菜单移动到它的父菜单时，我无法让它们关闭。它应该隐藏之前的菜单，直到导航栏(顶部)，并在我离开它的任何子菜单并悬停在页面正文上时隐藏所有菜单。
小提琴：
HTML：
<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascrip
浏览 2提问于2013-02-14得票数 1
回答已采纳
1回答
我想在几个型号之间使用多个选择下拉列表
我有这个：
class Report < ActiveRecord::Base
belongs_to :region
end
class City < ActiveRecord::Base
has_many :regions
end
class Region < ActiveRecord::Base
has_many :reports
belongs_to :city
end
当我选择一个城市时，我想从所选城市中拉出项目列表，并将其显示在下一个下拉列表中。如何创建下拉菜单之间的关系？有谁可以帮我？
谢谢。
浏览 1提问于2011-03-29得票数 3
回答已采纳
1回答
我有两个下拉菜单，我的目标是允许用户选择值；一旦他们选择了项，他们就可以立即提交值。然而，由于某些原因，我似乎无法找到最好的方法。为了创建下拉菜单表单，我使用了react mui.com库。任何帮助都可以，谢谢。
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-do
浏览 6提问于2022-03-29得票数 1
1回答
不呈现css样式
、、、、
我试图添加一个下拉菜单到我的应用程序，我选择了选择()。但是，它似乎没有正确地显示在页面上。，似乎缺少css样式。我是一个非常新手的反应，所以请容忍我，如果这不是一个聪明的问题。提前感谢！
webpack.config.js
var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
module.exports = {
context: __dirname,
entr
浏览 4提问于2017-04-28得票数 0
回答已采纳
1回答
当我选择子级下拉菜单项时，孔下拉菜单消失。我希望只有选定的下拉列表消失，它不会隐藏父级下拉列表。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class=
浏览 0提问于2018-06-20得票数 0
1回答
如何根据选定的值呈现一个组件？
、、、、
这是我的App.js，它由下拉菜单组成。
import React,{useState} from 'react'
import Barchart from './Barchart'
import './barStyle.css';
const App=()=>{
const[selects,setSelects]=useState(1);
function handleChange(e)
{
//console.log('clicked');
const tmp=e.target.
浏览 3提问于2022-01-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
