尝试在 React 中调度按键事件

Question

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

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

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

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

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

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

以下是上述代码取自的原型链接：https://codesandbox.io/s/wizardly-hopper-vrh4w ?file=/src/App.js:149-441

Answer 1

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