React中的下拉菜单未显示
在React中，下拉菜单未显示可能是由以下几个原因导致的：
- 组件渲染问题：请确保下拉菜单组件已正确地添加到需要显示的位置，并且已经正确设置了相关的props。可以检查组件的生命周期方法，例如
componentDidMount或useEffect是否正确地触发。 - CSS样式问题：检查下拉菜单组件的样式是否正确设置，确保其位置、大小、背景等样式属性没有被覆盖或冲突。
- 数据传递问题：检查下拉菜单组件是否接收到了正确的数据，并且数据是否经过正确的处理。可以使用调试工具，如React开发者工具或浏览器的开发者工具，来检查组件的props和状态。
- 事件处理问题：如果下拉菜单需要在某个事件触发后显示，请确保事件已正确地绑定，并且事件处理函数中的逻辑正确执行。
对于React中的下拉菜单组件，可以使用腾讯云的相关产品进行开发和部署。
腾讯云相关产品推荐：
- Serverless Cloud Function（SCF）：SCF是一种无服务器计算服务，可以帮助开发者更轻松地构建和部署无服务器应用，适用于快速开发和迭代的场景。详情请查看：腾讯云 SCF
- Cloud Base（TCB）：TCB是腾讯云提供的一站式云开发平台，提供了丰富的云端能力和开发工具，适用于前后端一体化开发和部署。详情请查看：腾讯云 TCB
以上是一些常见的问题和解决方案，具体原因需要根据具体情况进行排查和调试。在开发过程中，可以借助腾讯云的云计算服务来提高开发效率和部署可靠性。
相关·内容
我正在制作一个日历应用程序，每当有人单击输入字段时，它应该显示为下拉菜单，在该下拉菜单中它应该让我选择字段。下拉列表中缺少样式。 它应该是这样显示的： ? 下面是它现在的显示方式： ? 下面是我保存日历的代码： import React, {useState} from 'react'
import Modal from "react-modal"
import Datetime from 'react-datetime';
function AddEvent({isOpen, onClose, onEventAdded}) {
浏览 33提问于2021-08-28得票数 1
回答已采纳
1回答
我正在迭代一个迪克，并显示在一个反应引导下拉菜单中的键。这是我的反应下拉组件，
class Dropdown extends React.Component
{
constructor(props)
{
super(props);
this.onTargetSelect = this.onTargetSelect.bind(this);
}
onTargetSelect(target)
{
console.log("Outputting from here: ", target);
浏览 1提问于2016-11-25得票数 4
回答已采纳
1回答
大家好，我在使用react本机方法时遇到了问题。我无法打开下拉菜单，然后看到值。当我单击下拉菜单时，它不会打开，也不会显示列表中的值。
export default class AddPost extends Component {
constructor(props){
super(props);
this.state={language:[{label="",value=""}],open:false}
}
setOpens=()=>{
this.setState({open:true})
}
render(){
r
浏览 1提问于2022-09-06得票数 0
我在我当前的项目中使用react 15，但是我想在我的下拉菜单打开时显示屏幕上的覆盖。在react 16中，我们可以使用React门户将子节点呈现到存在于父组件的DOM层次结构之外的DOM节点中。如何在react 15版本中实现同样的功能？
浏览 3提问于2018-11-19得票数 1
? 我对React-native还很陌生，因为我还在探索它的选择，所以我被困在一个问题上。我目前的问题是，我需要显示一个可搜索的下拉列表，在那里它将显示前五个项目，它将来自一个api，并在顶部有一个搜索字段。当用户在搜索字段中输入数据时，下拉菜单将通过调用异步api开始搜索，并在同一下拉菜单中获取数据和显示。在原生的react中有可能吗？在react中，可以使用"react-select/async“包来完成。下面是react代码: React： async getOptions(inputValue, callback) {
if (!inputValue)
浏览 31提问于2021-01-19得票数 1
回答已采纳
使用React-Select Creatable时，我是否可以从下拉菜单中仅隐藏创建新选项。我想像往常一样显示其他建议，并希望保留创建新标签的可创建功能。我只是不想在下拉菜单中显示用户正在输入的内容。
编辑:为React-Select添加示例代码：
import React, { Component } from 'react';
import CreatableSelect from 'react-select/lib/Creatable';
const colourOptions = [
{ value: 'chocolate', la
浏览 2提问于2018-08-06得票数 3
回答已采纳
我试图使用ref自动聚焦语义ui react下拉菜单中的输入，但由于某些原因它不起作用。另外，当dropdown打开时，输入应该是自动聚焦的。这是代码沙箱链接。非常感谢你，https://codesandbox.io/s/semantic-ui-example-forked-5wrlp?file=/example.js
浏览 18提问于2021-09-05得票数 0
2回答
如果您只需单击下拉菜单开/关，我当前的实现就可以正常工作。然而，一旦你通过滚动关闭菜单，一旦你再次打开下拉菜单，菜单就不会显示，或者每隔一次打开它就会显示一次。
我的移动导航栏中有这个相同的CSSTransition组件，它工作得很好，所以这里唯一的外部因素就是我拥有的<Dropdown>组件。
有没有人知道我如何在不做任何额外工作的情况下解决这个问题？否则，我想我将不得不抛弃dropdown组件，实现我自己的显示/隐藏系统。
import React from 'react';
import { Link } from 'react-router-dom&
浏览 26提问于2019-08-07得票数 1
回答已采纳
我正在学习react，并试图通过一个按钮更新react-select下拉菜单的state/selected值。单击该按钮时，将调用buttonClick()函数来设置新的状态值，但react-select状态没有更改。下拉列表中的选定标签保持不变。如何更改react-select的状态，使其显示新的选定值？谢谢。 https://codesandbox.io/s/react-select-test-nv8d8
浏览 71提问于2021-07-20得票数 2
回答已采纳
1回答
我制作了一个下拉菜单，用户可以选择不同的编解码器，然后根据用户选择的编解码器，我想呈现另一个组件，它给出了与该编解码器相关的用户选项。例如，如果用户选择MP3，我希望显示我的<MP3Options/>组件。问题是，除了编解码器下拉菜单之外，我不知道如何呈现<MP3Options/>组件。我目前所做的使<MP3Options/>组件在选择MP3时会显示出来，但是编解码器下拉菜单将不再显示。这是不好的，因为如果用户决定选择另一个编解码器，他们不能，因为下拉菜单不再显示。
我相信这是因为我正在返回<MP3Options/>，因此其余的代码(显示下拉菜单
浏览 4提问于2020-12-03得票数 0
回答已采纳
使用React应用程序并尝试显示类似于下拉功能的选项，我使用的是<Select>标记，react-select，.Everything，api抓取很好，数据是可用的。但是，它在下拉菜单中没有显示任何选项。
import React, { Component } from 'react';
import Select from 'react-select';
import url from '../services/urlService';
class TechCompanies extends Component {
st
浏览 0提问于2019-07-02得票数 0
回答已采纳
我想知道如何在下拉菜单中显示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
我想知道react-select是否可以在呈现的选项中显示html。例如，如果fetched选项有<b>text</b>，我希望下拉菜单中的文本显示为粗体，而不是<b>text</b>。
我阅读了文档，但没有找到任何解决方案。
谢谢
浏览 1提问于2018-03-16得票数 3
我正在尝试在React Native android应用程序中显示下拉菜单。为此，我使用了React Native Picker，它在样式和定位下拉菜单方面似乎非常有限。我无法使菜单在carret (向下箭头按钮)位置下方弹出。 我试着设置边距，希望把菜单往下推，但无济于事。 <Picker
// selectedValue={stateValue}
style={{
height: 36,
width: 261,
浏览 13提问于2019-09-14得票数 6
回答已采纳
1回答
我正在尝试在我的React应用程序中包含一个Foundation下拉菜单。但是，当我尝试添加下拉菜单的正常代码时，下拉功能不起作用，下拉菜单项都会自动显示。我还收到错误：
未捕获的TypeError：$(...).foundation不是Constructor.componentDidMount中的函数
下面是我的代码。非常感谢。
var React = require('react');
var $ = require('jQuery');
var Nav = React.createClass({
componentDidMount: function
浏览 1提问于2017-04-21得票数 2
下拉菜单将有一个用户列表，这些用户将被分配执行特定任务，因此如何使用React动态添加和显示这些用户。
浏览 0提问于2020-10-07得票数 0
回答已采纳
嗨，有没有一种方法可以让我通过使用Google Apps脚本并从共享电子表格中拉出的下拉菜单，仅显示A列中以某个字母开头的项目？
浏览 0提问于2012-08-30得票数 0
我想在导航栏中制作下拉菜单，就像WhatsApp一样。一些下拉菜单在导航栏内，另一些在导航栏外。下拉菜单项的按钮不会触发外部导航栏，这是问题所在。 使用React导航，我为导航设置了navigationOption，从它的子级开始包含下拉菜单，这是选项卡导航栏，因为我想要它下面的选项卡导航栏，就像WhatsApp一样。我还设置了覆盖整个应用程序的透明TouchableHiglight。因此，如果我按下除菜单按钮以外的任何位置，它将隐藏下拉菜单。就像WhatsApp一样。这是我的React-Native应用程序的代码： class DropdownMenu extends React.Comp
浏览 17提问于2019-02-14得票数 0
我有一个性别下拉列表，单选:男性/女性 然而，我们的设计师想让它更有趣，并将下拉菜单变成如下所示的按钮： ? 我如何在Javascript/React中实现这些按钮，单击一个按钮将其高亮显示，然后取消高亮显示相反的按钮？
浏览 9提问于2020-04-24得票数 0
回答已采纳
<select id="selelct-dropdown">
<option value="1">One</option>
<option value="2">Two</option>
</select> 对于像这样的普通select，我可以使用以下命令更改所选值 $('#select-dropdown').val(1) 但是当我使用react-select时，浏览器中既没有显示select标签，也没有option标签，有没有办法通过jque
浏览 5提问于2021-04-01得票数 0
1回答
我一直在用这封信混音。
@mixin btn($text, $color) {
cursor: pointer;
&:hover {
.text {
&::after {
content: $text;
}
}
}
}
.btnbitacora {
@include btn("Bit\0000E1cora", #00b8d4);
}
但在浏览器中显示：
"Bitácora“，分裂了，我需要"Bitáco
浏览 1提问于2021-02-16得票数 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
回答已采纳
我只想知道最好的处理方法(不需要代码，只需要方法)。当我点击LI元素时，我试图显示下拉菜单。
var Balloon = React.createClass({displayName: "Balloon",
getInitialState: function() {
return { shaded: false };
},
handleClick: function(event) {
this.setState({ shaded: !this.state.shade
浏览 3提问于2015-04-28得票数 0
回答已采纳
我已经开始使用Flux和react-router开发一个应用程序。我的一个组件使用从Flux存储中获得的状态进行填充。这可以很好地工作。但是，当我使用react-router离开这个组件，然后再次返回时，我得到了上面的错误。如果我刷新页面，错误就会消失，页面工作正常。
根据我对此的理解，react-router似乎没有重新挂载此组件，因此它试图更改未挂载组件的状态，因此出现了错误。
如果这是正确的，我如何让react-router重新挂载组件？
PS。这个问题的代码太长了，不能在这里发布它是在Github上发布的，但是因为这个问题已经解决了，所以这个帖子已经被删除了。更新(谢谢Sean)：
该
浏览 0提问于2015-03-13得票数 1
在react中，我必须把两个输入字段的值相加。我有一些显示结果的问题。如何保存整个计算结果到下拉菜单？
我认为我的代码中也存在异步问题:按钮的第一个按键只显示下拉菜单中的输入字段值，只有第二个按钮按下显示结果。
这是我的密码
import React from 'react'
export default class SumCalculation extends React.Component {
constructor(props) {
super(props);
this.state = {
浏览 2提问于2020-02-09得票数 0
回答已采纳
1回答
我已经用spfx和react创建了一个底部的占位符，它包含一个菜单。当我从下拉菜单中选择一个选项时，页面会刷新，但底部的占位符仍然显示下拉菜单已打开，我喜欢刷新所有内容，但不喜欢底部的占位符。当加载新页面时，占位符是否会刷新？ 问候
浏览 13提问于2019-02-08得票数 0
1回答
我有一个下拉菜单组件(Material)，并希望根据此下拉菜单中的选择在另一个文件中呈现不同的Textfield。换句话说，如果值是住宅，则显示住宅组件的文本字段。
const selections = [
{
value: 'Residential',
label: 'Residential',
},
{
value: 'Commercial',
label: 'Commercial',
},
{
value: 'Hybrid',
label:
浏览 8提问于2022-03-25得票数 0
回答已采纳
我是react的新手，我正在设计一个下拉菜单，它使用axios从API接收信息：
axios.get('/api/jobs/list-tags',{headers:headers}).then(respo =>{
console.log(respo.data)
this.setState({tagsList:respo.data})
})
这是数据的形状：
Object { id: 1, name: "MongoDB" }
Object { id: 2, name: "JavaScript" }
我想使用re
浏览 0提问于2020-05-03得票数 0
2回答
React Native下拉菜单
、、、、
如何在React Native中实现下拉菜单。类似于我们为网络所做的事情。这是可能的吗，或者下拉菜单在手机上是不同的吗？我看到react原生有一个Picker，但现在它被弃用了。欢迎对其他广泛使用和可定制的库提出任何建议。
浏览 20提问于2021-08-10得票数 0
2回答
我正在尝试让一个下拉菜单栏在React中显示选项，当您将悬停在它上面时。我到处都找过了，所有的解决方案似乎都过时了，不起作用，请告诉我，如果你能解决这个问题。
下面是我尝试将更改应用到的下拉菜单：
<Navbar>
<NavDropdown title="Dropdown Menu">
<NavDropdown.Item href="#action/3.1">Option 1</NavDropdown.Item>
<NavDropdown.Item href="#action/3.
浏览 7提问于2020-04-03得票数 2
2回答
我正在尝试实现一个具有搜索功能的Antd下拉菜单，并希望在单击外部时关闭下拉菜单。但在我的代码中，即使我点击了搜索框，在点击外部的同时，它也会切换下拉菜单的打开和关闭(这不是我们想要的)。我希望我的下拉菜单只在搜索框中有一些字符输入时才打开，如果搜索框中没有字符或在外部单击时关闭，如果我继续单击搜索框本身，下拉菜单不应该打开和关闭。有没有什么我错过的道具？以下是示例代码：
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css"
浏览 282提问于2021-06-05得票数 2
我正在使用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回答
我正在使用react-select为一个使用React/Redux和Electron的开源应用程序创建下拉菜单。为此，我使用了react-select提供的bog标准示例代码。但是，在运行时，当选择框显示时，单击它似乎不会做任何事情。本应显示的下拉列表并没有出现。当检查HTML源代码时，它显示当单击时，HTML中确实会出现一些东西，但这在应用程序中是不可见的。 这是一个相当大的应用程序，我不知道发布代码片段有多大价值；仅这一个文件就有500LoC。有没有人知道为什么会发生这种情况？
浏览 40提问于2021-03-27得票数 0
1回答
我试图使用语义UI制作一个下拉菜单，显示自己的点击，但不知道如何显示它。现在，当我点击，我只是console.log“嗨”。
import React from "react";
class Dropdown extends React.Component {
state = {};
onClick = () => {
console.log("hi");
};
render() {
return (
<div onClick={() => this.onClick()} class="
浏览 0提问于2019-09-07得票数 0
回答已采纳
大家好
我有一个React Native项目，它还为我的UI/UX使用框架，为数据库使用
第一
我从我的数据库中检索了数据，看起来像这个
[
{
name: "Eric",
age: 21,
city: "Jakarta"
},
{
name: "Alex",
age: 18,
city: "Surabaya"
}
]
第二
有一个下拉组件，称为。为了显示屏幕上的数据，我制作了自己的组件，在组件中添加了一个下拉列表或OverflowMenu，最后一件事是使用数组.m
浏览 2提问于2020-09-21得票数 0
回答已采纳
1回答
我使用的是react 17.0.2和material ui 4.11.4
我想定制select元素的外观(就像material ui的Chip component )。为此，我使用了Autocoomplete组件来呈现一个输入元素。我已经在input元素下面渲染了Chip组件。
我还在renderInput回调函数中获取ref，我正在使用该函数从芯片组件触发输入点击。
当我登录params.inputProps.ref.current时，我确实获得了input元素，但是调用click函数并没有显示下拉菜单，而只是聚焦于input元素。当我直接单击输入时，它会显示下拉菜单。
我已经创建了一个这种
浏览 2提问于2021-08-03得票数 0
1回答
我的页面上有两个相对定位的区域，内容和页眉。
内容的z索引比标题高-这是对页面结构的要求。
我已经简化了HTML和CSS，以说明我在这里要做的事情：
这给标题中存在的下拉菜单带来了一个问题，因为它们显示在内容区域的下方，即使它们的z索引更高。
在示例页面上，请注意下拉菜单是如何位于内容区域下方的。
感谢在解决这个问题上的任何帮助。
浏览 1提问于2011-09-30得票数 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
回答已采纳
1回答
我有一个react引导表，每一行上的最后一个单元格有一个下拉菜单。直到最后一行，下拉菜单由于表元素中的overflow:hidden而被切断。我想保留这个，如果我禁用它，那么每当我在列标题上悬停时，就会有一个很长的高亮显示来传递表的身体高度。overflow hidden保持相对于表体的突出显示列。
我怎样才能克服这个问题？我尝试构建自己的自定义下拉菜单，如下所示：
表构成部分：
<tbody>
{this.state.apps.map((app)=>{
return <AppRow />;
浏览 0提问于2019-08-14得票数 2
1回答
在div中显示形式选择
、、、
我正在尝试创建一个UI，以便在客户端从下拉菜单中选择一个选项时进行更新。我尝试将其设置为:呈现两个子组件(Inputs和Display)的react父组件(react，Display)。Inputs呈现下拉菜单表单。Display呈现html输出，该输出显示在Input中选择的内容。
例子如下：
var Inputs=React.createClass({
getInitialState: function() {
return {value: 'cat'}
},
handleChange: function() {
浏览 3提问于2016-05-06得票数 0
回答已采纳
1回答
我试图导入angularjs工作代码到 redux。
在angularjs中，这段代码对于下拉菜单非常有效，但我试图让它与react完全兼容。
这是我的问题，在React中，成功地显示了依赖下拉菜单中的记录，但我想要的是每次选择第一个下拉菜单中的记录时都得到依赖(第二个下拉菜单)数据的值。
fetchRecord(){}似乎没有选择和调用任何数据。
Angularjs代码
<body ng-app='myapp'>
<div ng-controller="fetchCtrl">
<tab
浏览 0提问于2018-11-09得票数 0
回答已采纳
我们有基于反应的前端和使用来实现所有下拉菜单。我们还有过去基于硒的自动化测试。使用Selenium，我们可以从每个下拉列表(展开后)获取所有选项的显示文本(标签)，但是我们正在寻找一种方法来获得所有选项的值。
让我们使用中的示例
import React, { Component } from 'react'
import Select from 'react-select'
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: &#
浏览 2提问于2021-04-16得票数 1
我试图在react-bootstrap中更改下拉菜单的背景颜色，但下拉菜单的顶部和底部仍然显示为白色(参见图片)。我尝试了自定义css，但它不起作用。任何帮助都将是非常有帮助的代码链接：
const {
Navbar,
Nav,
NavItem,
NavDropdown,
MenuItem
} = ReactBootstrap;
class NavbarInstance extends React.Component {
render() {
return (
<Navbar id="basic-nav-dropdown
浏览 3提问于2020-04-27得票数 0
我正在使用下面的代码
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回答
Reactjs下拉菜单未显示
、、、、
我正在创建与reactjs导航栏，其中应该包括一个下拉菜单组件。我采用了react bootstrap中的示例。
import React from 'react';
import {NavDropdown} from 'react-bootstrap'
export default function Dropdown() {
return (
<>
<div className="dropdown-style">
<NavDropdown title="Dropdown&#
浏览 0提问于2019-10-30得票数 0
以下是示例代码，该示例在除IE11之外的所有其他浏览器中都可以正常工作。此下拉菜单在单击后立即关闭。下拉列表不显示。 import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
const Example: React.FC = () => {
const options = [{ label:"grpes", value: "grapes" },{ label:"mango
浏览 8提问于2020-09-14得票数 0
1回答
我们是在Drupal 8网站工作，同一用户将有两个不同的用户配置文件，买方和卖方。
我们想显示一个用户下拉菜单，当用户点击“购买”链接在下拉，然后网站的主菜单将根据“买家”的配置文件进行更改。
如果用户单击下拉菜单中的"sell“链接，则站点的主菜单将按”卖方“配置文件更改。
浏览 0提问于2017-08-22得票数 1
1回答
我正试图将包含几个单词的状态映射到下面的“反应引导”下拉菜单中，包括了我的尝试。
我的状态看起来像是“一些要查看的单词”，每个单词都被一个空格隔开。
我尝试使用for循环将这些项映射为“ul”元素，但是下拉列表根本没有显示任何内容。
import React, { Component } from 'react';
import '../App.css';
import {Button,InputGroup,Dropdown,DropdownButton,ButtonGroup} from 'react-bootstrap';
export d
浏览 3提问于2019-10-16得票数 0
回答已采纳
一般来说，React允许我使用各种类型的FormControls：
// Input field
<FormControl
type="text"
placeholder="Placeholder text"
value={this.props.value}
inputRef={(ref) => this.inputfield = ref}
/>
// Dropdown menu
<FormControl componentClass="select"
defaultValue=
浏览 0提问于2019-02-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
