React-bootstrap，如何关闭下拉菜单
React-bootstrap 是一个基于 React 的 UI 组件库，它提供了一系列预定义的组件，可以帮助开发者快速构建美观且响应式的用户界面。下面是关闭 React-bootstrap 下拉菜单的方法：
- 控制状态变量：可以通过控制一个状态变量来实现关闭下拉菜单的功能。在 React 中，可以使用 useState 钩子函数来定义一个状态变量。例如：
import React, { useState } from 'react';
import { Dropdown } from 'react-bootstrap';
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);
const handleClose = () => {
setIsOpen(false);
};
return (
<Dropdown show={isOpen} onClose={handleClose}>
{/* 下拉菜单内容 */}
</Dropdown>
);
}在上面的代码中，我们使用 useState 定义了一个名为 isOpen 的状态变量，并将其初始值设置为 false。然后，我们在 Dropdown 组件中使用 show 属性来控制下拉菜单的显示与隐藏，onClose 属性指定了关闭下拉菜单时的回调函数 handleClose。
- 使用 useRef 引用下拉菜单：另一种关闭下拉菜单的方法是使用 useRef 钩子函数来引用下拉菜单组件，并通过调用其方法来关闭菜单。例如：
import React, { useRef } from 'react';
import { Dropdown } from 'react-bootstrap';
function MyComponent() {
const dropdownRef = useRef(null);
const handleClose = () => {
dropdownRef.current.hide();
};
return (
<Dropdown ref={dropdownRef}>
{/* 下拉菜单内容 */}
</Dropdown>
);
}在上面的代码中，我们使用 useRef 创建了一个名为 dropdownRef 的引用。然后，我们在 Dropdown 组件中使用 ref 属性将其绑定到下拉菜单组件上。最后，我们可以通过调用 dropdownRef.current.hide() 方法来关闭下拉菜单。
以上是两种关闭 React-bootstrap 下拉菜单的方法，开发者可以根据自己的需求选择适合的方式来实现。
相关·内容
1回答
保持下拉打开在反应中
javascript、reactjs、typescript
当用户单击它以进行多个选择时，我希望保持组合框打开，并且只有当用户单击组合框外部时才关闭。当用户单击所选项目之一时，它将关闭。怎么把它打开？
const ComboBox: (props: ComboBoxProps) => JSX.Element = ({
...
}) => {
const [isOpen, setIsOpen] = useState<boolean>(false);
const [connect, setConnect] = useState<boolean>(false);
const [dropDownString,
浏览 3提问于2022-11-10得票数 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回答
材质UI DatePicker自定义renderInput
javascript、reactjs、typescript、material-ui、datepicker
最近，我开始在React + TypeScript项目中使用material。以下代码是根据官方网站上的示例代码编写的。
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import DatePicker from '@mui/lab/DatePicker';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import TextField from '@mui/material/TextFiel
浏览 6提问于2022-03-17得票数 3
1回答
如何测试模态是否呈现？
reactjs、unit-testing、react-hooks、jestjs、react-testing-library
我有一个组件，由一个按钮组成，当用户单击按钮时，显示按钮模式，但使用门户在根div之外呈现。如何测试模型是否使用jest和RTL进行渲染？
文件要测试
import {useState,useEffect} from 'react;
import Modal from '../Modal';
export const MyComponent=()=>{
const [isOpen,setIsOpen]=useState(false);
return(
<>
<button onClick={()=>{setIsOpen(tr
浏览 2提问于2022-09-05得票数 0
1回答
如何从下拉组件外部关闭自定义下拉列表？
javascript、react-native
我正在使用一个下拉列表，它基本上类似于应用程序中许多屏幕上的下拉列表。正如你所看到的，在我使用这个下拉列表的屏幕上，当点击这个下拉列表时，它会变成50米高，当再次点击时会变成20米。在我使用这个下拉列表的屏幕上，如果下拉列表是打开的(高度是50)，我希望它在点击时关闭，而不是屏幕上的下拉列表。因为我在很多屏幕上使用下拉菜单，所以我只想在下拉组件中这样做。我怎么能这么做？
import React, { useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
浏览 10提问于2022-10-26得票数 1
回答已采纳
2回答
允许组件检测Gatsby中的路由更改
reactjs、gatsby
在Gatsby项目中，我有一个header组件，它在每个页面上都是持久的。页眉有一个用于显示导航的模式。每当路由更改时，我需要将isOpen状态设置为false，以便nav模式关闭。由于路由不仅可以通过单击模式中的链接来更改，还可以通过使用浏览器上的后退按钮来更改，因此我不希望在链接上使用事件来关闭模式。 在Gatsby中，我可以使用gatsby-browser.js中的onRouteUpdate来检测路由更改，这很有效。但是我需要将事件传递给我的组件，而这正是我遇到困难的地方。我已经简化了下面的代码，以显示设置。 gatsby-browser.js： import React from &
浏览 23提问于2020-04-17得票数 11
回答已采纳
1回答
使用reactjs打开选定的模态
reactjs
我在这个上使用一个代码共享
代码只适用于一个模式，我尝试添加不止一次，但当我第一次单击它时，打开所有的modals触发器，然后正常工作，这是我面临的唯一问题
Modal.js
import React, { useRef, useEffect } from "react";
import { createPortal } from "react-dom";
const Modal = ({ isOpen, type, onClose, children }) => {
const modalEl = useRef(null);
const han
浏览 0提问于2019-04-25得票数 0
3回答
在React中点击链接关闭DropDown的最佳实践是什么？
javascript、reactjs、dropdown、dom-events
我有以下代码：
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";
import "./styles.css";
function DropDown({ close }) {
return (
<ul>
<li>
<Link
浏览 0提问于2019-11-14得票数 0
2回答
如何在功能组件中为SectionList设置ref？
react-native
基本上，我想使用方法的，但我不能设法在一个功能组件内设置ref。
注意:对于下面的例子，SectionList的强制属性被省略，以提高清晰度。
我试过使用useRef，但这不起作用，3秒后ref仍然是null。
const MyComponent = () => {
const ref = React.useRef()
React.useEffect(() =>
setTimeout(() => ref.scrollToLocation({itemIndex: 0, sectionIndex: 0}, 3000)
)
return (
<
浏览 9提问于2021-02-03得票数 0
回答已采纳
1回答
如何使用Jest和ReactJs测试onClose prop
javascript、reactjs、jestjs、react-hooks
我有一个组件看起来像这样，当按钮被点击，一个模式打开，当X按钮被点击，鼠标被按下，或者esc键被按下，模式关闭并调用onClose函数，然而，Jest报告说setIsOpen(false);没有被覆盖。
const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="container">
<button
onClick={() => {
浏览 1提问于2021-04-10得票数 0
1回答
如何根据卡上单击的内容显示模式
javascript、reactjs、material-ui
我怎样才能显示仅基于卡片的模式被点击？
我有一张动态卡片。一旦我点击了一张特定的卡片，它如何用数据的id标题来显示模式呢？从现在起，一旦我点击一张卡，它将只显示最后一个id。
主应用程序
const [isOpen, setisOpen] = useState(false);
const handleOpen = (id) => {
console.log(id);
setOpen(true)
};
const handleClose = () => {
setisOpen(false);
};
……
{data.map((i) =&
浏览 2提问于2022-08-24得票数 0
1回答
素材-UI对话框可重用组件不能工作，但控制台和应用程序中没有错误。
javascript、reactjs、material-ui
这是我的可重用组件：
import {
Dialog,
DialogContent,
DialogContentText,
DialogTitle,
Divider,
Button,
DialogActions,
} from "@mui/material";
const Modal = ({ title, subtitle, children, isOpen, handleClose }) => {
return (
<Dialog open={isOpen} onClose={handleClose}>
浏览 1提问于2022-02-13得票数 1
回答已采纳
1回答
当NavDropdown.Item关闭时，响应引导NavBar关闭模态
javascript、reactjs、react-bootstrap
你好，我正在尝试打开一个Modal，点击NavDropdown.Item，它在NavBar里面，
如果我做这样的事
import { useState } from "react";
import { rockPositions } from "../../constant/markers"
import { CloseButton, NavDropdown, Alert } from "react-bootstrap";
import Modal from 'react-modal/lib/components/Modal';
浏览 4提问于2022-04-15得票数 0
2回答
将钩子作为支柱传递后的无限循环
reactjs、material-ui、react-hooks
我有一个无限的循环错误后，把钩子作为道具。确切地说，我希望在另一个模式关闭后再打开一个模式。
首先，我成功地将数据从GrandChild传递到ParentComponent。但是，当涉及到将数据从父级传递到ModalComponent (通过isOpen挂钩)时，它会触发一个无限循环，我找不到原因。
const ParentComponent => {
const [ isOpen, setIsOpen] = useState(false);
const handleChange = (newValue) => {
setIsOpen(newValue)
浏览 3提问于2020-09-17得票数 1
回答已采纳
1回答
Materail UI x React:当一个项目试图显示Popover时，自动完成关闭
reactjs、material-ui
我正在尝试有一个自定义的自动完成，每个项目都有一个更多的图标，当你悬停鼠标指针。
当您单击该图标时，它假定会弹出弹出窗口，但它会关闭自动完成列表。
在上面的图像中，我将指针悬停在图标上，当我单击它时，它关闭了列表。
App.js
import React, { useState } from "react";
import { TextField, Paper } from "@material-ui/core";
import { Autocomplete, useAutocomplete } from "@material-ui/lab&#
浏览 4提问于2021-11-01得票数 0
2回答
预动作createPortal多次呈现
javascript、reactjs、preact
我在我的项目中使用preact (一个小版本的react)。
在更新到preactX版本之前，我使用的是这样的Modal组件，它没有问题，这是我的Modal组件的样子：
import { Component } from 'preact';
import Portal from 'preact-portal';
export default class Modal extends Component {
componentWillReceiveProps({ isOpen }) {
if (this.state.isOpen !==
浏览 1提问于2020-05-16得票数 0
回答已采纳
2回答
useNavigate给了我空白的网页
reactjs、react-router、material-ui、react-router-dom
App.js
import CreatePopBox from "./popbox";
import createGuestPage from "./guestPage";
import {BrowserRouter , Route} from "react-router-dom";
import {Routes} from "react-router"
function App() {
return (
<>
<BrowserRouter>
浏览 9提问于2022-06-14得票数 2
回答已采纳
1回答
我想关闭模式时，反应esc是按下
reactjs、styled-components
我们正在使用反应和样式-组件。
当按下按钮时，从右边显示模态(抽屉)。
我希望当esc按钮被按下时，模态被关闭。
如何检测是否已按下esc按钮？
import Drawer from "./components/Drawer";
import { FunctionComponent, useState } from "react";
const App: FunctionComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const onClose = () =>
浏览 2提问于2021-09-21得票数 2
回答已采纳
1回答
如何使goUp和goDown函数在.jsx文件中工作？
javascript、reactjs
我有一个goUp和goDown函数，它不能在.jsx文件中工作。有一个文本区域和两个按钮(上下)。使用按钮，函数应该在textarea中向上滚动和向下滚动。我在一个.js文件中测试了相同的代码，它们运行得很好。但是，在.jsx文件中，它们根本不起作用。我做了一些研究，但我找不出问题。
import { useState } from 'react'
import Dialog from '@mui/material/Dialog'
import Button from '@mui/material/Button'
import CircularP
浏览 1提问于2022-07-22得票数 1
1回答
在反应模态内打开新模型
reactjs、bootstrap-modal
我是反应应用程序的新手。我需要的是，我的肚脐上有一个标牌。它工作得很完美。但在这个模式中，我有一个注册模式链接。当我按下它时，两个调制解调器都会立即关闭。下面是我写的一个例子代码，
SignInModal.js
import { Fragment, useState } from "react";
import { Link } from "react-router-dom";
import { Modal, Button } from "react-bootstrap";
import SignUpModal from
浏览 1提问于2021-12-30得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
