如何在ReasonML / ReasonReact中处理全局DOM事件？

Question

在ReasonML中，侦听/处理全局DOM事件的最惯用的方式是什么。

我正在构建2048游戏的ReasonReact版本，需要监听键盘事件。

在一个标准的JS /应用程序做出反应我有一个组件componentDidMount的生命周期方法，我会听与事件document.addEventListener("keypress", [my_event_handler])和UNLISTEN相同的上componentWillUnmount用document.removeEventListener("keypress", [my_event_handler])。

在Reason / ReasonReact中访问文档的最惯用的方式是什么。（addEventListener / removeEventListener）？

Answer 1

您可以在ReasonReact中做几乎相同的事情-它支持didMount和willUnmount生命周期方法，这与它们的ReactJS命名相对应：https ://reasonml.github.io/reason-react/docs/en/lifecycles.html

要添加和删除事件侦听器，可以使用@glennsl出色的bs-webapi软件包：https ://redex.github.io/package/bs-webapi

以下是添加和删除事件侦听器的一些示例：https : //github.com/reasonml-community/bs-webapi-incubator/blob/24cee2500b9c98355a14896fa9fc4ceb8a3e2258/tests/dom/events/eventTarget_test.re

放在一起，您可以拥有一个像这样的组件：

/* src/components/MyComponent.re */
let document = Webapi.Dom.Document.asEventTarget(Webapi.Dom.document);
let handleKey = _ => Js.log("Key pressed");
let component = ReasonReact.statelessComponent("MyComponent");
let make = _children => {
  ...component,
  didMount: _self =>
    Webapi.Dom.EventTarget.addEventListener("keypress", handleKey, document),
  willUnmount: _self =>
    Webapi.Dom.EventTarget.removeEventListener("keypress", handleKey, document),
  render: _self => <p> (ReasonReact.string("Hello")) </p>,
};