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

Question

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

我怀疑这是因为 autoClose 仅适用于当前选定的菜单，在下面的示例中，它适用于 main 菜单，而不适用于 secondary 菜单然后，如上所述，当我重新打开下拉菜单时，它直接显示 secondary 菜单，工作，一旦我返回 main 菜单，它没有。

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

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) 来防止菜单关闭。

从“反应-bootstrap”导入{下拉} 从“反应”导入{useState}

const Mydropdown = (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

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

Autoclose='outside' doesn't work with multiple menu in react-bootstrap

reactjs

react-bootstrap