Autoclose='outside' 不适用于 react-bootstrap 中的多个菜单

Question

我有一个下拉菜单，其中有两个可能的菜单，可以通过单击一些下拉项来相互访问。通过添加autoClose='outside'，我解决了单击下拉主菜单中某个位置时不及时关闭的问题。但由于我有另一个菜单，一旦它显示出来，我第一次打开它时，自动关闭就不起作用了，相反，它就像从未设置过一样，关闭整个下拉菜单，当我重新打开它时进入第二个辅助菜单，这个"错误"不会再次出现在这个菜单上，而是在我回到第一个菜单时发生。

我怀疑这是因为autoClose只适用于当前选定的菜单，在下面的例子中，它适用于主菜单，而不是首先在辅助中，然后，如上所述，当我重新打开下拉菜单时，它直接显示辅菜单，有效，一旦我回到主要的菜单，它就不起作用。

这基本上就是我正在运行的代码。

import {Dropdown} from 'react-bootstrap';
import {useState} from 'react';
const Mydropdown = (props) => {
const [menu,setMenu] = useState('main');
return(
<>
<Dropdown autoClose='outside'>
{
menu=="main"
&&
(
<>
<Dropdown.Menu>
<Dropdown.Item onClick={()=>setMenu("secondary")}>
Secondary menu
</Dropdown.Item>
</Dropdown.Menu>
</>
)
}
{
menu=="secondary"
&&
(
<>
<Dropdown.Menu>
<Dropdown.Item onClick={()=>setMenu("main")}>
Secondary menu
</Dropdown.Item>
</Dropdown.Menu>
</>
)
}
</Dropdown>
</>
);
}

Answer 1

我不确定我是否100%符合您的要求，但这个版本应该允许一个下拉菜单来选择性地切换内容(无需自动关闭(：

const Mydropdown = (props) => {
const [menu, setMenu] = useState("main");
return (
<Dropdown autoClose="outside">
<Dropdown.Toggle variant="primary">Dropdown Test</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>
<Dropdown.Item href="#">Menu Item</Dropdown.Item>        
{menu == "main" && (
<Dropdown.Item onClick={() => setMenu("secondary")}>
Secondary menu
</Dropdown.Item>
)}
{menu == "secondary" && (
<Dropdown.Item onClick={() => setMenu("main")}>
Main menu
</Dropdown.Item>
)}
</Dropdown.Menu>
</Dropdown>
);
};

此处提供的工作示例：https://codepen.io/ablewhite/pen/BawdVpg

Answer 2

如果我正确理解你的问题，你想要一个包含另一个下拉菜单的下拉菜单吗？下面的代码会使这一点更加复杂，我建议使用autoClose={false(来防止菜单关闭

从"导入｛Dropdown｝；react bootstrap"；从"导入{useState}；反应"；

const Mydropload=(props(=>｛

const [menu, setMenu] = useState("main")
return (
<Dropdown autoClose={false}>
<Dropdown.Toggle>
Main Menu
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={() => setMenu("secondary")}>Action 1</Dropdown.Item>
{menu === "secondary" &&
<Dropdown autoClose={false}>
<Dropdown.Toggle>
Secondary
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={() => setMenu("main")}>Action 2</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
}
</Dropdown.Menu>
</Dropdown>
)

}

导出默认的Mydropdown