Question

我有一个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 1

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

Answer 2

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

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

Answer 3

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

Answer 4

再考虑一下这一点，如果无法执行制表符，那么如何在当前元素上设置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 < len ){
  if (inputs[i++].dataSet.focused) {
    inputs[i].focus()
    break
  }
}

Answer 5

为最后一次输入的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码

以及您的渲染方法

<>
   ...
   <input .../>
   <input ... onChange={this.onLastInputChange} />    //<---- the last pin input
</>

Answer 6

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

父项传递一个onLast道具，该道具是PIN的功能，PIN会在到达最后一个输入时在onLast执行。
父对象将引用转发给Next，Next将引用附加到其可聚焦元素（输入，按钮，链接等）上。

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

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

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

Answer 7

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

Answer 8

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

反应触发KeyboardEvent

8 个答案: