在React.js中手动关闭react-bootstrap的"DropdownButton",可以通过使用React的状态管理来实现。以下是一种可能的解决方案:
首先,您需要在组件中引入useState钩子来管理状态:
import React, { useState } from 'react';
import { DropdownButton, Dropdown } from 'react-bootstrap';
const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const handleToggleDropdown = () => {
setIsOpen(!isOpen);
};
const handleCloseDropdown = () => {
setIsOpen(false);
};
return (
<div>
<DropdownButton
title="Dropdown"
show={isOpen}
onClick={handleToggleDropdown}
>
<Dropdown.Item onClick={handleCloseDropdown}>Option 1</Dropdown.Item>
<Dropdown.Item onClick={handleCloseDropdown}>Option 2</Dropdown.Item>
<Dropdown.Item onClick={handleCloseDropdown}>Option 3</Dropdown.Item>
</DropdownButton>
</div>
);
};
export default MyComponent;
在上面的代码中,我们使用了useState钩子创建了一个名为isOpen的状态变量,并初始化为false。然后,我们定义了handleToggleDropdown函数来切换isOpen的值,从而控制DropdownButton的显示与隐藏。接下来,我们定义了handleCloseDropdown函数来关闭DropdownButton,并将isOpen设置为false。
在DropdownButton组件中,我们添加了一个show属性,它的值与isOpen相等,这样当isOpen为true时,DropdownButton将显示出来。我们还为Dropdown.Item的点击事件绑定了handleCloseDropdown函数,以便在选择选项后关闭DropdownButton。
这样,当用户点击DropdownButton时,Dropdown会根据isOpen的状态进行显示或隐藏,并且当用户选择一个选项时,DropdownButton会手动关闭。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云