1

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

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

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

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

4

3 回答 3

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

于 2021-10-27T01:44:56.643 回答
1

为此，您可以使用一些事件侦听器：onMouseEnter&onMouseLeave以及useDisclosure可用于处理 Menu open、close和的钩子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。

于 2021-07-11T19:41:15.457 回答
0 
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;

对于任何难以使用悬停而不是单击的人，也许你可以试试这个

于 2021-09-19T07:30:49.253 回答