reactjs - 从 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);

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

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

<input onKeyPress={handleKeyPress} />

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

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

2 回答 2