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

Question

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

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

在标准的 JS/React 应用程序中，我将使用具有 componentDidMount 生命周期方法的组件，在其中使用 document.addEventListener("keypress", [my_event_handler]) 监听事件，并在 componentWillUnmount 中使用 document.removeEventListener("keypress", [my_event_handler]) 停止监听相同的事件。

在 Reason/ReasonReact 中访问 document.(addEventListener/removeEventListener) 的最惯用方式是什么？

- Alan R. Soares

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>,
};

- Yawar

---

如何访问事件上的属性？作为一个新手，我正在学习Reasonml，并阅读此文档（https://github.com/reasonml-community/bs-webapi-incubator/blob/master/src/dom/events/KeyboardEventRe.re），我期望能够访问`event.key`，但是我无法实现。我该如何理解这个文件？ - user1816631

@GormCasper 你可以将 key 作为一个函数使用，例如 let handleKey = evt => Js.log2("Key pressed:", Dom.KeyboardEvent.key(evt));。 - Yawar

Answer 2

最终我自己编写了与 addEventListener 和 removeEventListener 相关的绑定代码:

[@bs.val]
external add_keyboard_event_listener :
  (string, ReactEventRe.Keyboard.t => unit) => unit =
  "addEventListener";

[@bs.val]
external remove_keyboard_event_listener :
  (string, ReactEventRe.Keyboard.t => unit) => unit =
  "removeEventListener";

- Alan R. Soares

---

啊，我明白了，这是因为这两个函数在浏览器全局命名空间中可用。 - Yawar

使用 keydown 监听事件并结合 ReactEventRe.Keyboard.key(event) 方法获取按下的键。 - user1816631