来自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

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

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

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的Synthetic事件不同），因此您需要像下面一样添加一个本地监听器，以监听它们。 csb上的示例

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