在ReasonReact中无法从事件侦听器获取事件数据

Question

我正在尝试实现表上的动态列调整大小(如Excel或Google )。

在我的呈现函数中，当用户单击我的调整大小控件上的鼠标时，我使用handle回调：

 <div
     className="resizer"
     onMouseDown={self.handle(handleColumnResizeStart)}
 />

在处理程序中，我希望为mousemove添加一个新的事件侦听器，以便当用户“拖动”时，我们可以绘制一些东西来指示新列边缘将在何处结束。

在mousemove处理程序中，我想我可以发送一个包含鼠标clientX坐标的还原器操作来更新组件状态，以便呈现函数可以在它们拖动时绘制一些东西。

let handleColumnResizeStart = (evt, self) => {
  /* this handler gets invoked when the mouse is moved */
  let handleMouseMove = evt => {

    Js.log(evt); /* in js land I can see that clientX is in that evt object */
    Js.log(ReactEvent.Mouse.clientX(evt)); /* but this creates type errors */


  };
  /* adds an event handler using the bs-webapi module */
  Webapi.Dom.EventTarget.addEventListener(
    "mousemove",
    handleMouseMove,
    document,
  );

};

当我试图使用ReactEvent.Mouse.clientX(evt)获取clientX的特定int值时，会得到以下错误：

  25 Webapi.Dom.EventTarget.removeEventListener(
  26 ┆   "mousemove",
  27 ┆   handleMouseMove,
  28 ┆   document,
  29 ┆ );

  This has type:
    ReactEvent.Mouse.t => unit
  But somewhere wanted:
    Dom.event => unit

  The incompatible parts:
    ReactEvent.Mouse.t (defined as
      ReactEvent.synthetic(ReactEvent.Mouse.tag))
    vs
    Dom.event (defined as Dom.event_like(Dom._baseClass))

>>>> Finish compiling(exit: 1)

在这里，我对类型系统的理解是有限的，我不知道如何将鼠标clientX坐标的值转换为变量。

Answer 1

虽然从React接收的事件和直接附加到DOM的事件处理程序可能看起来类似，但它们实际上是不同的。React给出的不是原始DOM事件，而是SyntheticEvent，因此它们被赋予了不同的类型，这就是类型错误通知您的原因。不能在需要使用Dom.event的情况下使用ReactEvent.Mouse.t。在本例中，evt是一个Dom.event，因为它是通过使用bs-webapi将事件处理程序直接附加到DOM获得的，而ReactEvent.Mouse.clientX当然需要一个ReactEvent.Mouse.t。

因此，您不应该使用ReactEvent.Mouse.clientX，而应该使用Webapi.Dom.MouseEvent.clientX。

不幸的是，这仍然不能工作，因为Webapi.Dom.MouseEvent.clientX需要一个Dom.mouseEvent，而不是Dom.event，它是所有DOM事件类型的超级类型，并且过于通用，不能用于特定于鼠标事件的函数。这反过来又是因为Webapi.Dom.EventTarget.addEventLsitener无法理解"mousemove"意味着它是一个鼠标事件。您应该使用Webapi.Dom.EventTarget.addMouseMoveEventListener，这确实为您提供了一个Dom.mouseEvent。

请注意，您得到的类型错误比它所需要的更令人困惑，因为它将推断错误类型并指出错误在其他地方，而不是您认为错误起源的地方。注释这些类型是个好主意，至少当您得到一个您难以理解的类型错误时。这样，编译器就不会推断出错误的类型，而是包含错误的起源。

您还可能希望使用Webapi.Dom.Document而不是Webapi.Dom.EventTarget。Document继承了EventTarget中的所有内容，但同时会记录和约束您操作的类型。