单击任意位置以关闭react中的下拉列表
在React中关闭下拉列表的方法有多种，以下是一种常见的实现方式：
- 首先，在React组件的构造函数中初始化一个状态变量，用于控制下拉列表的显示与隐藏：
constructor(props) {
super(props);
this.state = {
isDropdownOpen: false
};
}- 在组件的render方法中，根据状态变量来决定是否显示下拉列表：
render() {
const { isDropdownOpen } = this.state;
return (
<div>
<button onClick={this.toggleDropdown}>点击打开下拉列表</button>
{isDropdownOpen && (
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
)}
</div>
);
}- 实现toggleDropdown方法，用于切换下拉列表的显示与隐藏：
toggleDropdown = () => {
this.setState(prevState => ({
isDropdownOpen: !prevState.isDropdownOpen
}));
}这样，当点击"点击打开下拉列表"按钮时，下拉列表会根据isDropdownOpen状态变量的值进行显示或隐藏。
关于React中关闭下拉列表的更多实现方式，可以参考React官方文档中的相关内容：React官方文档。
请注意，以上答案中没有提及任何特定的云计算品牌商，如需了解腾讯云相关产品和产品介绍，请访问腾讯云官方网站：腾讯云官方网站。
相关·内容
3回答
如何翻译以下jQuery代码以作出反应？
javascript、jquery、reactjs、api、menu
我有以下代码，它基本上折叠了所有的子菜单，只在单击时打开它们：
<ul class="menu">
<li>
<a href="#">One</a>
<ul class="menu">
<li>
<a href="#">Alpha</a>
<ul class="menu">
<li><a href="
浏览 2提问于2018-06-03得票数 0
回答已采纳
2回答
只在第一次和第二次在ReactJS中工作的单击事件
javascript、reactjs、drop-down-menu、react-hooks
我在这里面临一个有趣的问题，不知道为什么会发生这种情况。基本上，我已经设置了任何单击事件都将触发toggleDropDown()，这将反转条件isDropdownOpen (为true或false)，这将有助于显示下拉菜单{isDropdownOpen ? <DropDownlist /> : false}。
我看到在第一次单击后，isDropdownOpen的条件更改为true，这很好，而且我再次单击它更改了最错误的，但当我执行第三次单击和以后的任何单击时，它仍然是假的，我可以看到elelel保留在导航条上，任何我做错了的提示。谢谢
在First单击usericon in n
浏览 1提问于2020-08-11得票数 0
2回答
在相同的方法中改变两种状态，一种是不改变第二种，为什么？
javascript、reactjs
我有下拉和onSelect项目下拉应该关闭。
这是一个叫做onSelect的函数，但是认为状态isOpen: false是不会改变的，
但是状态部分：selected: option将被更改。
有人知道为什么吗？
onSelect = (option) => {
this.setState({ selected: option, isOpen: false }, () => {
this.props.onSelect(option);
});
};
下面是一个完整的组件：
import React from 'react';
impo
浏览 0提问于2020-01-20得票数 0
回答已采纳
4回答
切换两件事分别反应构造器
javascript、reactjs
我试图切换两个不同的下拉菜单，似乎无法使它工作。新的反应，可能已经看了太久，这是一些简单的事情。问题是，当我切换另一个也被切换，所以他们都显示..。以下是我所拥有的：
import React from "react";
import { Link } from "./component/link";
import styles from "./header.module.css";
class Header extends React.Component {
constructor(props) {
super ( props
浏览 0提问于2019-01-13得票数 0
回答已采纳
2回答
选择列表项或在组件外部单击时反应关闭下拉菜单
javascript、reactjs
我有一个下拉菜单在我的react js中，我想要的是当我点击任何列表项时，我想让它关闭，或者即使我点击它以外的任何地方，下拉菜单也应该自动关闭(然后在点击ofcoss时再次打开)。
下面是我的代码
import React from "react";
import { useState, useEffect } from "react";
const TripTypeDropdown = (props) => {
const [values, setValues] = useState([
{ tripType: "One Way&#
浏览 2提问于2021-06-18得票数 0
2回答
有没有一种方法可以改变包装组件的父状态？
reactjs
我正在尝试实现一个下拉包装器。被DropDownWrapper包装的元素被期望通过onClick切换下拉列表的显示。
class DropdownMenuWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
active: true,
};
this.handleDropDownDisplay = this.handleDropDownDisplay.bind(this);
this.displayDropDownItems =
浏览 5提问于2018-09-06得票数 0
2回答
如何在反应中将功能从父母传递给孩子？
reactjs、jsx
我有一个下拉组件，它在组件内部的按钮上使用onClick={this.openDrop}。构成部分如下：
import React, { Component } from 'react'
export default class Dropdown extends Component {
constructor(){
super()
this.state ={
subMenu: ''
}
this.openDrop = this.openDrop.bind(this)
this.closeDrop =
浏览 0提问于2018-04-21得票数 1
回答已采纳
1回答
React谷歌地图InfoWindow切换显示，一次一个
javascript、reactjs、google-maps-api-3、infowindow、react-google-maps
我目前正在使用react-google- InfoWindow，我可以通过点击标记(从地图或列表中)正确地显示标记和地图。但是，一旦我点击一个标记打开，以前的InfoWindow保持打开，即使我选择了一个新的。
如果我点击列表中的'x‘或标记，我就可以关闭InfoWindow。但我不确定如何自动关闭其他InfoWindows，只打开当前标记的InfoWindow。
为了得到一个概念，我看过几个类似的问题：，。
但我仍然在传递和检查唯一标记时遇到问题，以便只显示与标记ID匹配的InfoWindow。
class MarkerInfoList extends Component
浏览 0提问于2018-05-18得票数 0
2回答
通信子-父母反应
javascript、jquery、reactjs
我正在学习反应js，现在我遇到了一个我不知道如何解决的问题，也许你们中的一些人可以帮我解决这个问题。
在我的the应用程序中，我有一个react组件，它表示选择语言的下拉列表，如下所示：
class LocaleSwitcher extends React.Component{
constructor() {
super();
this.render = this.render.bind(this);
this.componentDidMount=this.componentDidMount.bind(this);
this.state = { langua
浏览 3提问于2015-12-28得票数 1
回答已采纳
1回答
未捕获的TypeError:无法读取未定义的属性“”onMouseEnter“”
javascript、reactjs、dropdown、react-bootstrap
我想建立一系列的下拉列表，将打开时，鼠标悬停在他们身上。我使用React-Bootstrap作为下拉列表。我定义了一个函数并在我的构造函数中设置了它。但它不能在Chrome中呈现，告诉我我的onMouseEnter函数是未定义的。我遗漏了什么导致这种情况发生的原因？我想我是在遵循基本的React指南，但是我不知道我错过了什么。 import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./Menu.css";
import Dropdo
浏览 12提问于2019-03-05得票数 1
回答已采纳
1回答
如何在React.js中显示下拉菜单并隐藏其他菜单
javascript、html、css、reactjs
我只想知道最好的处理方法(不需要代码，只需要方法)。当我点击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
回答已采纳
2回答
如何在React中显示和隐藏单击按钮时的元素？
javascript、html、css、reactjs
我有一个待办事项列表，我必须在点击按钮时显示待办事项的详细信息。我有两个按钮“查看详细信息”和“隐藏详细信息”的same.Below是代码： class Todos extends React.Component{
constructor(props){
super(props);
this.state={
shown:false,
todos: []
}
}
showDetails = (bool) => {
this.setState({
shown:b
浏览 29提问于2021-04-07得票数 0
回答已采纳
1回答
我如何才能使导航停留在桌面上呢？(ReactJS)
javascript、reactjs
每当我在桌面上显示导航时，我就创建了一个移动菜单。我使用的JS效果和我用来创建导航链接之一下拉列表的效果相同。我不希望导航消失时，我每点击它。
如何将导航显示在桌面屏幕上？
此代码如下：
import React from 'react';
import { Link } from 'react-router-dom';
import Dropdown from '../dropdowns/dropdown.js';
import hamburger from "../images/menu.svg";
class Mobil
浏览 1提问于2019-12-18得票数 0
回答已采纳
3回答
以编程方式使onBlur在react中触发
javascript、reactjs、ecmascript-6
我使用onBlur来关闭下拉列表，但我也想处理一个在里面渲染的安莉的点击处理程序，setState不会在这里工作，当用户尝试再次打开下拉列表时，行为会中断，在这里试试：
我的代码：
toggleDropdown = () => {
this.setState({
openDropdown: !this.state.openDropdown
})
}
render() {
return (
<div>
<div tabIndex="0" onFocus={this.toggle
浏览 1提问于2017-07-09得票数 2
回答已采纳
2回答
我有一个Select下拉菜单，我从列表中选择选项，我有一个"clear“按钮，它应该在按钮被点击后重置下拉选择。 当单击clear按钮时，虽然我用一个空字符串更新了state对象的对应值，但它没有清除下拉列表。我是reactjs的新手，有什么想法可以做到这一点吗？ 代码- https://codesandbox.io/s/shy-dew-keidv?file=/src/index.js import React, { Component } from "react";
import ReactDOM from "react-dom";
import
浏览 21提问于2020-04-19得票数 0
回答已采纳
1回答
通过单击React中的外部组件更改react-select的显示值
reactjs、eventhandler、lifting
在一个数组中，我将其显示为一个组件(Box.js)上的列表，并存储在另一个组件(Search.js)中的react-select中。它们都是属于父组件(trial.js)的同一级别的子项。
最终，我希望通过从列表中单击或从react-select中更改/选择来显示对象。我已经将事件处理程序提升到它们的父级，并成功地独立显示了所选对象。
但是，我似乎无法将onClick与onChange同步。具体来说，我希望click事件处理程序将选定列表设置为粗体，并更改react-strap中显示的项，反之亦然。react主页中给出的提升状态和同步事件处理程序示例使用文本输入，这对我正在尝试做的事情没有真正
浏览 7提问于2018-09-07得票数 0
2回答
React:从render方法外部更新组件的属性，而不使用状态
javascript、reactjs
这就是我想要实现的目标。我有两个React组件Product和ProductInfoPanel，显示在一个ProductList组件中。Product显示有关产品的选定信息，如产品名称和价格。单击产品时，ProductInfoPanel中将显示更多详细信息。所以我需要把wah clicked传给ProductInfoPanel。
下面是我目前将它们组合在一起的方式。每个Product都有一个传入的点击处理函数，它在被调用时传递回product对象，然后传递给ProductInfoPanel的属性。ProductList使用状态来跟踪被点击的内容，所以当它发生变化时，它会触发信息面板的重新渲染。
浏览 0提问于2016-07-10得票数 1
4回答
如果我们以vuejs单击菜单外，如何隐藏下拉菜单
javascript、drop-down-menu、vue.js、vuejs2、vue-component
我正在使用vuejs中的dropdown菜单组件来制作普通下拉菜单。我为dropdown组件编写的代码是：
<template>
<span class="dropdown" :class="{shown: state}">
<a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a>
<div class=&
浏览 7提问于2017-09-04得票数 21
回答已采纳
2回答
在外部单击或滚动时隐藏下拉列表
css、reactjs、autocomplete
我想在单击或滚动到窗格外后关闭下拉列表。当我们滚动到下拉框之外时，下拉框始终处于打开状态。这是我的代码..
static defaultProps = { // <-- DEFAULT PROPS
wrapperStyle: {
display: 'inline',
},
menuStyle: {
borderRadius: '3px',
boxShadow: '0 2px 12px rgba
浏览 2提问于2018-11-22得票数 1
1回答
我创建了三个组件：
内容
马钦弗
布局
分页
每当我单击view按钮时，matchinfo组件视图就呈现出来，这将显示特定匹配的matchinfo。每当我点击view stats button (见屏幕截图)时，它也会呈现分页组件，这个组件不应该呈现，如何解决这个问题。
组件matchinfo是内容组件的子组件。
content.js：
import React, { Component } from 'react';
import Matchinfo from './matchinfo';
import './content.c
浏览 1提问于2018-01-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
