反应触发KeyboardEvent

我有一个PIN码字段组件，它只是包装在React.Fragment中的输入的列表。每次按下一个键，它将聚焦下一个输入。当我到达最后一个输入时，我想触发一个列表以将下一个控制器聚焦在组件之外（输入，按钮，链接等）。我试图调度KeyboardEvent，但不起作用：

const evt = new KeyboardEvent("keydown",{
...
code: "Tab",key: "Tab",})
lastInput.dispatchEvent(evt)


有什么主意吗？

源代码：https://github.com/soywod/react-pin-field
演示：https://react-pin-field.soywod.me/

我想这会解决您的问题-在重新渲染组件时，触发您要聚焦的组件外部的输入元素的鼠标单击事件。

根据此answer，浏览器安全模型将停止您模拟Tab键的按下。

作为替代方案，您可以在组件中添加nextFocusId属性，并使用该属性将光标移动到document.getElementById().focus()。

您可以尝试在元素上使用tabindex

再考虑一下这一点，如果无法执行制表符，那么如何在当前元素上设置data-focused，然后收集页面上的所有输入元素，并通过data属性找到当前关注的元素，然后，如果我们不是最后一个元素，则关注下一个项目。

const inputs = document.querySelectorAll("button,input,select,textarea")
const len = inputs.length - 1 // ignore last item in array
let i = 0
while( i if (inputs[i++].dataSet.focused) {
inputs[i].focus()
break
}
}

,

为最后一次输入的keypress事件定义监听器

private OnLastInputChange= e => {
const target = e.target;
const keyboardEvent = new KeyboardEvent("keypress",{
bubbles : true,cancelable : true,key : "Tab",shiftKey : false,keyCode : 13
});
target.dispatchEvent(keyboardEvent);
}


keyCode 13代表制表符ASCII码

以及您的渲染方法

<>
...

//<---- the last pin input


,

假设这里有三个主要组件，一个是PIN，另一个是Next，还有一个父组件Parent拥有PIN和Next。

1. 父项传递一个onLast道具，该道具是PIN的功能，PIN会在到达最后一个输入时在onLast执行。


2. 父对象将引用转发给Next，Next将引用附加到其可聚焦元素（输入，按钮，链接等）上。

请记住上述条件，现在我们可以按条件将焦点“触发”到“下一步”。例如调用onLast时（通过PIN到达最后一个输入）。通过使用传统的dom API。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus

ps。通过编程触发键盘事件是可以的，并且它将触发执行适当的事件处理程序。就是如此，您永远都不要期望它会更有效，例如生成文本，移动焦点（Tab键），它们完全是编程无法达到的用户操作。

您可以使用父组件作为中介器，以帮助子组件相互通信，就像我在下面草拟的示例一样：
enter link description here

您可以使用父组件作为中介者，以帮助子组件彼此通信，就像我在下面草拟的示例一样，与您所做的相同：
sample