ReactJS：更改页面时自动关闭菜单

Question

我创建了一个嵌套菜单，但遇到了问题。

我有：

Parent_Menu
  Parent1
      > Child_Menu1
      > Child_Menu2
  Parent2

现在，如果我点击 Child_Menu1 中的示例，我会正确地重定向到该页面并且 Parent1 菜单也会关闭，但是 Parent_Menu 重新打开（这样我可以再次点击或在 parent1 或 parent2 中）。

我会在更改页面时关闭所有菜单（parent_menu）。

import React, { useState } from 'react';
import MenuItem from 'app/shared/layout/menus/menu-item';
import { Dropdown, DropdownToggle, DropdownMenu, UncontrolledDropdown, DropdownItem, NavLink } from 'reactstrap';
import { NavDropdown } from './menu-components';

    export const EntitiesMenu = props => {
      const [dropDownOpen, setDropDownOpen] = useState(false);
      const toggle = () => setDropDownOpen(prevState => !prevState);
    
      return (
        <NavDropdown
          icon="th-list"
          name="Parent_Menu"
          id="parent-menu"
          data-cy="parent_menu"
          style={{ maxHeight: '80vh', minWidth: '150px', minHeight: '250px' }}
        >
          <Dropdown isOpen={dropDownOpen} toggle={toggle} direction="right">
            <DropdownToggle nav caret style={{ color: '#000000', marginLeft: 25 }}>
              Parent1
            </DropdownToggle>
            <DropdownMenu right style={{ border: '0px', outline: 'none', marginTop: 20 }}>
              <DropdownItem>
                <MenuItem icon="asterisk" to="/child_menu1">
                  Child_Menu1
                </MenuItem>
              </DropdownItem>
              <DropdownItem>
                <MenuItem icon="asterisk" to="/child_menu2">
                  Child_Menu2
                </MenuItem>
              </DropdownItem>
            </DropdownMenu>
            <NavLink href="/parent2" style={{ color: '#000000', marginLeft: 25 }}>
              Parent2
            </NavLink>
          </Dropdown>
        </NavDropdown>
      );
    };

如何自动关闭所有菜单？

Answer 1

你试过onBlur了吗？或者您甚至可以使用 onClick


import React, { useState } from 'react';
import MenuItem from 'app/shared/layout/menus/menu-item';
import { Dropdown, DropdownToggle, DropdownMenu, UncontrolledDropdown, DropdownItem, NavLink } from 'reactstrap';
import { NavDropdown } from './menu-components';

    export const EntitiesMenu = props => {
      const [dropDownOpen, setDropDownOpen] = useState(false);
      const toggle = () => setDropDownOpen(prevState => !prevState);
    
      return (
        <NavDropdown
          icon="th-list"
          name="Parent_Menu"
          id="parent-menu"
          data-cy="parent_menu"
          style={{ maxHeight: '80vh', minWidth: '150px', minHeight: '250px' }}
        >
          <Dropdown isOpen={dropDownOpen} toggle={toggle} direction="right">
            <DropdownToggle nav caret style={{ color: '#000000', marginLeft: 25 }}>
              Parent1
            </DropdownToggle>
            <DropdownMenu onBlur={e=>{
toggle()
}} right style={{ border: '0px', outline: 'none', marginTop: 20 }}>
              <DropdownItem>
                <MenuItem onClick={()=>{
toggle()
}}  icon="asterisk" to="/child_menu1">
                  Child_Menu1
                </MenuItem>
              </DropdownItem>
              <DropdownItem>
                <MenuItem onClick={()=>{
toggle()
}} icon="asterisk" to="/child_menu2">
                  Child_Menu2
                </MenuItem>
              </DropdownItem>
            </DropdownMenu>
            <NavLink onClick={()=>{
toggle()
}}  href="/parent2" style={{ color: '#000000', marginLeft: 25 }}>
              Parent2
            </NavLink>
          </Dropdown>
        </NavDropdown>
      );
    };

Answer 2

import React, { useState } from 'react';
import MenuItem from 'app/shared/layout/menus/menu-item';
import { Dropdown, DropdownToggle, DropdownMenu, UncontrolledDropdown, DropdownItem, NavLink } from 'reactstrap';
import { NavDropdown } from './menu-components';

    export const EntitiesMenu = props => {
      const [dropDownOpen, setDropDownOpen] = useState(false);
      const [dropDownStyle, setStyle] = useState('80px');
      const toggle = () => setDropDownOpen(prevState => !prevState);
      useEffect(()=>{ 
        dropDownOpen ? setStyle('0'); : setStyle('80px'); 
      },[dropDownOpen]);

    
      return (
        <NavDropdown
          icon="th-list"
          name="Parent_Menu"
          id="parent-menu"
          data-cy="parent_menu"
          style={{ maxHeight: customHeight, minWidth: '150px', minHeight: '250px' }}
        >
          <Dropdown isOpen={dropDownOpen} toggle={toggle} direction="right">
            <DropdownToggle nav caret style={{ color: '#000000', marginLeft: 25 }}>
              Parent1
            </DropdownToggle>
            <DropdownMenu right style={{ border: '0px', outline: 'none', marginTop: 20 }}>
              <DropdownItem>
                <MenuItem icon="asterisk" to="/child_menu1">
                  Child_Menu1
                </MenuItem>
              </DropdownItem>
              <DropdownItem>
                <MenuItem icon="asterisk" to="/child_menu2">
                  Child_Menu2
                </MenuItem>
              </DropdownItem>
            </DropdownMenu>
            <NavLink href="/parent2" style={{ color: '#000000', marginLeft: 25 }}>
              Parent2
            </NavLink>
          </Dropdown>
        </NavDropdown>
      );
    };

ReactJS：更改页面时自动关闭菜单

ReactJS: Close automatically the menu when change page

javascript

reactjs

reactstrap