reactjs - 自动关闭 ='outside' 不适用于 react-bootstrap 中的多个菜单

Question

我有一个下拉菜单，其中有 2 个可能的菜单，通过单击某些下拉菜单项可以相互访问。通过添加 autoClose='outside'，我解决了在下拉主菜单中单击某处时未及时关闭的问题。但是因为我有另一个菜单，一旦显示，我第一次打开它时，autoClose 并没有真正起作用，相反，就好像它从未设置过一样，关闭整个下拉菜单，然后我重新打开它，进入第二个二级菜单，这个“错误”不会再次出现在这个菜单上，但是当我返回第一个菜单时会出现，等等。

我怀疑这是因为 autoClose 仅​​适用于当前选定的菜单，在下面的示例中它适用于 main 菜单，而不首先适用于 secondary 菜单，如上所述，当我重新打开下拉菜单时，它会直接显示辅助 菜单，并且可以正常工作，而一旦我返回主 菜单，它就不会了。

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

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