如何在Elmish应用程序中使用Fable听键盘

Question

在Elmish应用程序中使用Fable，我想直接收听键盘，并将每个击键作为一条消息。

Elmish文档中有一个关于订阅的页面，展示了如何将JavaScript事件转换为消息。就我而言，这些事件是"；keydown"；事件，我在JavaScript中找到了捕获"事件"的代码；keydown"；事件。

但是，我很难将F#代码组合在一起。我的问题是，我不知道如何从按键时引发的事件访问keyCode。这是我迄今为止的代码：

let keyDown initial =
let sub dispatch =
document.addEventListener("keydown", fun e ->
dispatch (KeyDown e.keyCode))  // keyCode is not accessible here
Cmd.ofSub sub

Answer 1

我认为您希望使用onKeyDown，而不是添加事件侦听器。如果你使用Feliz生成HTML元素，你可以像这样在keydown上调度：

Html.input [
prop.onKeyDown (fun evt ->
dispatch (KeyDown evt.key))
]

或者，您也可以使用动态键入按名称访问属性(绕过类型检查器(：

open Fable.Core.JsInterop
document.addEventListener("keydown", fun e ->
dispatch (KeyDown e?keyCode))   // use ? operator

不过，我还没有尝试过，也不会推荐它

Answer 2

在这种情况下，您知道keydown生成的事件实际上是一个Browser。类型。KeyboardEvent，而不仅仅是Browser。类型。事件因此，您可以安全地向下传输

let keydown (event: Event) =
let keyboardEvent = event :?> KeyboardEvent
printfn "%A" keyboardEvent.key
document.addEventListener("keydown", keydown)