Feliz: 添加 KeyboardEvent 优点以轻松绑定到按键事件

创建于 2019-11-02 · 6评论 · 资料来源: Zaid-Ajaj/Feliz

我正在考虑添加一个很好的方法来绑定到键盘事件，像下面这样的东西真的很棒：

场景 1：绑定到单个键事件（最常见的用例）

Html.input [
    prop.onKeyUp(key.enter, fun _ -> dispatch Login)
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

场景2.1：绑定多个key

Html.input [
    prop.onKeyUp [ key.enter, fun _ -> dispatch Login ]
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

场景2.2：绑定多个key

Html.input [
    prop.onKeyUp(dispatch, [ key.enter, Login; key.esc, Reset ])
    prop.onChange (UsernameChanged >> dispatch)
    prop.valueOrDefault state.Username
]

这是值得一试的！非常欢迎 PR，如果您想尝试一下，请告诉我和其他贡献者

Feliz good first issue help wanted

资料来源

Zaid-Ajaj

👍1

所有6条评论

哦，太好了，我喜欢你的想法！

恕我直言Key读起来比Keys ，即Key.Enter与Keys.Enter 。

cmeeren 于 2019-11-02

@cmeeren你是对的，为了保持一致，我们一直使用单数词表示模块prop ， style和key （小写）将是一个自然的补充👍

Zaid-Ajaj 于 2019-11-02

是的，虽然我注意到我们有colors和现在fonts ... 需要考虑改变的东西。 :)

cmeeren 于 2019-11-02

@cmeeren在 #95 提出了关于colors和fonts

提案的细化

场景 2.2 与其他事件处理程序不一致，因为这意味着我们也应该实现onClick(dispatch, Login)并且很可能我们不会（当然欢迎反馈和讨论）

至于场景 1 和场景 2，那里的事件处理程序应该接受KeyboardEvent作为 lambda 的参数（与键一起）。即键盘事件将采取重载：

KeyboardEvent -> unit // default
IKeyboardKey * (KeyboardEvent -> unit) // scenario 1
(IKeyboardKey * (KeyboardEvent -> unit)) list // scenario 2

Zaid-Ajaj 于 2019-11-02

在我看来很好。不过，证据就在布丁里。来看看使用感受如何。 :)

cmeeren 于 2019-11-02

🚀1

键盘优点补充说：

// Enter only
prop.onKeyUp (key.enter, fun _ -> dispatch Login)
// Enter + CTRL
prop.onKeyUp (key.ctrl(key.enter), fun _ -> dispatch Login)
// Enter + SHIFT
prop.onKeyUp (key.shift(key.enter), fun _ -> dispatch Login)
// Enter + CTRL + SHIFT
prop.onKeyUp (key.ctrlAndShift(key.enter), fun _ -> dispatch Login)

Zaid-Ajaj 于 2020-03-20

🚀1

此页面是否有帮助？

0 / 5 - 0 等级

Feliz: 添加 KeyboardEvent 优点以轻松绑定到按键事件

场景 1：绑定到单个键事件（最常见的用例）

场景2.1：绑定多个key

场景2.2：绑定多个key

所有6条评论

提案的细化

相关问题