时间戳

首页 > 解决方案 > 尝试在 React 中调度按键事件

javascript - 尝试在 React 中调度按键事件

问题描述

我有一个带有输入元素的组件，我想在该输入元素上触发一个“tab”按键事件，以便在发生一组逻辑时跳转到下一个输入元素。

我在第一个输入元素上有一个引用，我试图触发 keypress 事件，如下所示：

useEffect(() => {
  if (ref.current) {
    ref.current.focus();
    setTimeout(() => {
      ref.current.dispatchEvent(
        new KeyboardEvent("keypress", { key: "Tab" })
      );
    }, 3000);
  }
});

首先，我确保使用 选择第一个输入元素.focus()，然后在 3 秒后触发按 Tab 键，希望看到焦点移到下一个字段，但它似乎不起作用。

这似乎是一个奇怪的例子，但这只是一个原型。我实际上打算做的是在我提交第一个输入字段时触发一些代码，这将获取一些带有其他输入字段的行，一旦呈现，我需要触发“tab”键。我想避免将 refs 附加到这些动态加载的输入字段，因为我觉得它会增加很多开销来跟踪 refs 并将它们传递下来，而我所需要的只是利用 tab 顺序并模拟按键以 tab 到加载后的第一个动态加载项。我可以将单个引用添加到您需要提交以填充动态字段的字段。

我注意到一些在线.dispatchEvent()直接在 ref 对象上调用的示例，但是如果我尝试得到一个错误，告诉我该函数不存在，所以我current改为在 prop 上调用它。不确定这是否有任何相关性。

这是一个原型的链接，上面的代码来自：https ://codesandbox.io/s/wizardly-hopper-vrh4w?file=/src/App.js:149-441

标签： javascriptreactjskeyeventreact-ref

解决方案

根据我在评论中得到的答案，您似乎无法通过模拟击键来触发本机浏览器行为（作为安全功能）（页面下方有关于 2/3 的注释）：https ://developer.mozilla.org/en -US/docs/Web/API/KeyboardEvent

推荐阅读