在没有物理点击的情况下模拟鼠标点击按钮[重复]

Question

我有使用带有 onClick 画布动画的反应库 react-ink 的按钮。该动画仅在鼠标（光标）单击按钮时有效。在我看来，我使用分配有热键的按钮，即使我点击键盘上的热键，我也需要触发“点击”动画。

我尝试使用dispatchEvent 模拟点击正确的高度和宽度，但它不起作用

我的例子：

const el = wrapperRef.current.querySelectorAll(`[data-target="${value.id}"]`)[0]
const elPosition = el.getBoundingClientRect();
const evt = new MouseEvent("mousedown", {
              'view': window,
              'bubbles': true,
              'cancelable': true,
              'screenX': elPosition.left,
              'screenY': elPosition.top
            });
 el.dispatchEvent(evt);

// button
  <div
     data-target={props.values.id}
     role="button">
     <Ink hasTouch={false} />
  </div>

Answer 1

你试过 useRef() 在墨水按钮组件上，如果它有 click 道具，那么您可以像下面这样触发它： const btn =useref();

在键盘事件监听器中执行这个

btn.current.click()