如何以编程方式扩展 React Reach UI (@reach/menu-button) 菜单？

Question

我正在使用名为 intro.js 的介绍包，在执行特定步骤后，我想单击我的下拉菜单并显示下拉菜单。我遇到的问题是 .click 事件不起作用，而 .focus 起作用。我有 console.log() 触发但由于某种原因下拉列表从未打开。这是代码：

import "./styles.css";
import React, {useRef} from 'react'
import { Steps, Hints } from "intro.js-react";
import {
  Menu,
  MenuList,
  MenuButton,
  MenuItem,
  useMenuButtonContext,
} from "@reach/menu-button";



export default function App() {

  const myRef = useRef(null)

  const [state, setState] = React.useState({
      stepsEnabled: true,
      initialStep: 0,
      steps: [
        {
          element: ".hello",
          intro: "Hello step"
        },
        {
          element: ".world",
          intro: "World step"
        }
      ],
      hintsEnabled: true,
      hints: [
        {
          element: ".hello",
          hint: "Hello hint",
          hintPosition: "middle-right"
        }
      ]
    })



  // This event fires after 2 seconds of closing the introduction tour
  const onExit = () => {
    setTimeout(() => {myRef.current.click(), console.log("this is the first message")}, 2000);
  }


  return (
    <div className="App">
        <Steps
          enabled={state.stepsEnabled}
          steps={state.steps}
          initialStep={state.initialStep}
          onExit={onExit}
        />
             <h1 className="hello">Hello,</h1>
        <hr />
        <h1 className="world">World!</h1>
        <hr />
      <Menu>
      <MenuButton id="example-button" ref={myRef} onClick={()=> console.log('clicked')}>
        Actions <span aria-hidden="true">▾</span>
      </MenuButton>
      <MenuList>
        <MenuItem >
          Download
        </MenuItem>
        <MenuItem >
          Create a Copy
        </MenuItem>
        <MenuItem >
          Mark as Draft
        </MenuItem>
        <MenuItem >
          Delete
        </MenuItem>
      </MenuList>
    </Menu>
    </div>
  );
}

基本上，一旦我关闭介绍导览（模态），我就会打开下拉菜单。这是这个例子的 link 到 Codesandbox：https://codesandbox.io/s/relaxed-swartz-8b8s6?file=/src/App.js

P.s 抱歉，代码格式错误且没有重构，这只是一个 PoC！

Answer 1

根据 docs（滚动到末尾），MenuButton 使用 mousedown。我尝试调度 mousedown 事件并扩展了菜单：

const onExit = () => {
    setTimeout(() => {
      myRef.current.dispatchEvent(new Event("mousedown", { bubbles: true }));
    }, 2000);
};

如何以编程方式扩展 React Reach UI (@reach/menu-button) 菜单？

How to programmatically expand React Reach UI (@reach/menu-button) Menu?

reactjs

react-hooks

use-ref