从 React ref 启动键盘事件答案

【问题标题】：Launch keyboard event from React ref从 React ref 启动键盘事件
【发布时间】：2020-03-16 03:01:03
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

KeyboardEvent 是一个原生浏览器事件（与 React 的 Synthetic 事件不同），因此您需要像下面一样添加一个原生监听器才能监听它们。 csb上的示例

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

【讨论】：

【解决方案2】：

可以这样做，并且不需要使用参考。

您可以尝试通过这样做来隔离您想要触发的内容：

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

<input onKeyPress={handleKeyPress} />

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

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

【讨论】：

我了解如何捕获键盘事件。我正在尝试发送一个键盘事件而不是捕获它。
知道了。综合调度键盘事件有什么需要？我的理解是键盘事件只能由键盘触发。当该键盘事件发生时，您希望发生的逻辑或操作可以独立创建并由任何其他代码段触发。如果你深入研究 React 文档中的 SyntheticEvents，可能会有一些东西。 reactjs.org/docs/events.html#keyboard-events