有没有办法让 chakra ui MenuList 项始终可见

Question

我正在使用 Chakra UI 创建菜单。我有这样的东西：

<Menu>
    <MenuButton>hover over this</MenuButton>

    <MenuList>
        <Flex>To show/hide this</Flex> 
    </MenuList>
</Menu>

我正在尝试在悬停时动态打开标签。 MenuList 默认是在用户点击时打开。当我点击按钮然后悬停在它上面时，我的悬停状态起作用了。我正在尝试找出一种方法，使用户不必单击 MenuButton 即可将鼠标悬停在其上。

Answer 1

为此，您可以使用一些事件侦听器：onMouseEnter & onMouseLeave 以及可用于处理菜单 open、[=15= 的 useDisclosure 挂钩], 和 toggle.

import React from "react";
import {
  Flex,
  MenuItem,
  Menu,
  MenuButton,
  MenuList,
  Button,
  useDisclosure
} from "@chakra-ui/react";

export default function App() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <div className="App">
      <Flex height="100vh" align="center" justifyContent="center" bg="gray.100">
        <Menu isOpen={isOpen}>
          <MenuButton
            as={Button}
            variant="solid"
            colorScheme="teal"
            onMouseEnter={onOpen}
            onMouseLeave={onClose}
          >
            Hover Me
          </MenuButton>
          <MenuList>
            <MenuItem>Download</MenuItem>
            <MenuItem>Create a Copy</MenuItem>
            <MenuItem>Mark as Draft</MenuItem>
            <MenuItem>Delete</MenuItem>
            <MenuItem>Attend a Workshop</MenuItem>
          </MenuList>
        </Menu>
      </Flex>
    </div>
  );
}

这是一个有效的 CodeSandbox。

Answer 2

import React, { useRef, useState } from "react";
import { Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/menu";
import { Button } from "@chakra-ui/button";

// TODO: dynamic button text and items
const PopupNavItem = () => {
  const timerRef = useRef();
  const [isOpenMenu, setIsOpenMenu] = useState(false);

  // menu list pops up automatically when cursor hovers over the button，
  const btnMouseEnterEvent = () => {
    setIsOpenMenu(true);
  };

  //,and vice versa，
  const btnMouseLeaveEvent = () => {
    // async
    timerRef.current = window.setTimeout(() => {
      setIsOpenMenu(false);
    }, 150);
  };

  // when the cursor moves away from the button but entering the menu list,the menu list stays open
  const menuListMouseEnterEvent = () => {
    // when entered, the timer has been cleared
    clearTimeout(timerRef.current);
    timerRef.current = undefined;
    setIsOpenMenu(true);
  };

  // finally, when the cursor moves away from the menu list, menu list closes
  const menuListMouseLeaveEvent = () => {
    setIsOpenMenu(false);
  };

  return (
    <Menu isOpen={isOpenMenu} id={1}>
      <MenuButton
        as={Button}
        variant="solid"
        colorScheme="teal"
        onMouseEnter={btnMouseEnterEvent}
        onMouseLeave={btnMouseLeaveEvent}
      >
        Hover Me
      </MenuButton>
      <MenuList
        onMouseEnter={menuListMouseEnterEvent}
        onMouseLeave={menuListMouseLeaveEvent}
      >
        <MenuItem>Download</MenuItem>
        <MenuItem>Create a Copy</MenuItem>
        <MenuItem>Mark as Draft</MenuItem>
        <MenuItem>Delete</MenuItem>
        <MenuItem>Attend a Workshop</MenuItem>
      </MenuList>
    </Menu>
  );
};

export default PopupNavItem;

对于那些在悬停而不是点击方面有困难的人，也许你可以试试这个

Answer 3

补充 Bassem 的回答。我们可以将 onMouseEnter 和 onMouseLeave 添加到菜单列表，这样它就不会在我们离开按钮时关闭。

import React from "react";
import {
  Flex,
  MenuItem,
  Menu,
  MenuButton,
  MenuList,
  Button,
  useDisclosure
} from "@chakra-ui/react";

export default function App() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <div className="App">
      <Flex height="100vh" align="center" justifyContent="center" bg="gray.100">
        <Menu isOpen={isOpen}>
          <MenuButton
            as={Button}
            variant="solid"
            colorScheme="teal"
            onMouseEnter={onOpen}
            onMouseLeave={onClose}
          >
            Hover Me
          </MenuButton>
          <MenuList onMouseEnter={onOpen} onMouseLeave={onClose}>
            <MenuItem>Download</MenuItem>
            <MenuItem>Create a Copy</MenuItem>
            <MenuItem>Mark as Draft</MenuItem>
            <MenuItem>Delete</MenuItem>
            <MenuItem>Attend a Workshop</MenuItem>
          </MenuList>
        </Menu>
      </Flex>
    </div>
  );
}

您可以在此处阅读更多内容https://www.coffeeclass.io/snippets/use-disclosure-menu-chakra-ui

有没有办法让 chakra ui MenuList 项始终可见

Is there a way to make chakra ui MenuList items always visible

javascript

css

reactjs

next.js

chakra-ui