代码之家 › 专栏 › 技术社区 › Homan

从ReasonReact中的事件侦听器获取事件数据时遇到问题

bs-webapi reason-react bucklescript reason reactjs

2

Homan · 技术社区 · 7 年前

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

在渲染函数中,我使用 handle 当用户在我的调整大小控件上单击鼠标时回调:

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

在mousemove处理程序中,我想我可以发送一个包含鼠标clientX坐标的reducer操作来更新组件状态,以便render函数可以在拖动时绘制一些东西。

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坐标的值转换成变量。

1 回复 | 直到 7 年前

1

3

glennsl Namudon'tdie 7 年前

尽管从React和直接连接到DOM的事件处理程序接收到的事件看起来相似,但实际上它们是不同的。React不会提供原始DOM事件,而是 SyntheticEvent Dom.event 其中 ReactEvent.Mouse.t 是预期的。在这种情况下 evt Dom.event事件 ,因为它是通过使用 bs-webapi ,和 ReactEvent.Mouse.clientX 当然,我希望 反应事件.鼠标.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 .

您可能还想使用 Webapi.Dom.Document 而不是 Webapi.Dom.EventTarget Document 继承中的一切 EventTarget ,但将同时记录和约束对其进行操作的类型。