在 React 组件外部单击时关闭菜单

Question

我有一个菜单组件，如果它是打开的，当我点击页面上的任何地方时我想关闭它。

有没有办法关闭菜单而不需要将事件侦听器添加到文档并检查 event.target。

无法将关闭函数发送回父组件，因为它位于单独的 Route。

Navbar
-> MenuComponent
RouteView
-> MainContent

Answer 1

是的。这可以通过将组件包装在 material ui 提供的 ClickAwayListener 中轻松实现。然后你将一个函数传递给 onClickAway 属性，它应该为你关闭你的菜单。我在下面提供了一个模板，您也可以查看 MUI docs:

import ClickAwayListener from '@mui/material/ClickAwayListener';

export default function MenuComponent() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };

  const handleClickAway = () => {
    setOpen(false);
  };

  return (
    <ClickAwayListener onClickAway={handleClickAway}>
      <Box>
        <button type="button" onClick={handleClick}>
          Open menu dropdown
        </button>
        {open ? (
          <Box>
            Click me, I will stay visible until you click outside.
          </Box>
        ) : null}
      </Box>
    </ClickAwayListener>
  );
}

在 React 组件外部单击时关闭菜单

Close menu when clicking outside the React component

javascript

reactjs

react-router

dom-events

onclicklistener