reactjs - 在 React 组件中通过 onMouseEnter 设置延迟状态

Question

我有一个由一系列 Material UI 的 ListItems 组成的菜单。当鼠标进入给定项目时，我使用其中一个道具将状态提升到父组件，父组件负责确定它需要显示哪个子菜单。以下是相关行：

• onMouseEnter在每个列表项中：

onMouseEnter={event => openDropDown(event, menuItem, subMenuItem)}

• openDropDown呼吁setSubMenuItem提升国家：

  const openDropDown = (event, menuItem, subMenuItem) => {
    if (subMenuItem.subMenu) {
      setSubMenuItem({ ...subMenuItem, parent: menuItem });
      setAnchorEl(event.target.getBoundingClientRect());
    } else {
      closeDropDown();
    }
  };

但是，状态转换比鼠标移动要慢。这会导致状态“卡住”在到达目的地的路径上的第一个项目中。因此，项目 2 和 6 的子菜单分别显示在场景 A 和 B 中（而不是预期的 4 和 3）：

任何确保设置状态与鼠标移动同步的想法都将受到欢迎。openDropDown我尝试在 a 内部调用，setTimeout但当我从一个项目移动到下一个项目时，它会导致每个子菜单弹出。

标签： reactjsmaterial-ui

Answer 1

我最终按照这个线程中的建议延迟了状态转换，并且像一个魅力一样工作。