React 触发 KeyboardEvent

Question

我有一个 PIN 码字段组件，它只是包裹在 React.Fragment 中的输入列表。每次按下一个键，它都会聚焦下一个输入。当我到达最后一个输入时，我想触发一个表格来聚焦组件外部的下一个控制器（输入、按钮、link 等）。我尝试发送 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

这个问题想多了，如果不能tab，在当前元素上设置data-focused，然后把页面上所有的input元素聚集起来，通过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。

Parent 传递一个 prop onLast 函数给 PIN，PIN 在最后一个输入到达时执行 onLast。
Parent 将 ref 转发给 Next，Next 将 ref 附加到其可聚焦元素（输入、按钮、link 等）。

考虑到以上条件，现在我们可以'trigger'根据条件关注下一步。例如当调用 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

React 触发 KeyboardEvent

React trigger KeyboardEvent

javascript

keyboard

events

reactjs