从 React ref 启动键盘事件

Question

我有一个 React 组件，它有一个 input 元素和附加的 ref。我知道常见的：inputRef.current.focus(); 使用 ref 来聚焦文本输入。但是，我正在努力寻找一个好的解决方案来从 inputRef.current 调度某个键盘事件。我试过：

let downEv = new KeyboardEvent('keydown', {'keyCode': 40, 'which': 40});
inputRef.current.dispatchEvent(downEv);

但是，这似乎没有任何作用。

Answer 1

可以这样做，而且不需要使用 ref.

您可以通过执行以下操作来尝试隔离要触发的内容：

handleKeyPress = (e) => {
  if (e.keyCode === 40) {
    // Whatever you want to trigger
    console.log(e.target.value)
  }
}

<input onKeyPress={handleKeyPress} />

如果您愿意，也可以从表单中触发：

<form onKeyPress={handleKeyPress}>
  ...
</form>

Answer 2

KeyboardEvent 是一个本机浏览器事件（不同于 React 的合成事件）因此您需要像下面一样添加一个本机侦听器才能侦听它们。 csb

上的示例

useEffect(()=>{
    ref.current.addEventListener('keydown',handleKeyDown)
  },[ref])

Launch keyboard event from React ref