在 ReasonReact 中从事件侦听器获取事件数据时遇到问题
Having trouble getting event data from event listener in ReasonReact
我正在尝试在 table 上实现动态列大小调整(例如在 Excel 或 Google 表格中)。
在我的渲染函数中,当用户在我的调整大小控件上单击鼠标时,我使用 handle
回调:
<div
className="resizer"
onMouseDown={self.handle(handleColumnResizeStart)}
/>
在处理程序中,我想为 mousemove 添加一个新的事件侦听器,这样当用户 "dragging" 我们可以绘制一些东西来指示新列边缘的结束位置。
在 mousemove 处理程序中,我想我可以发送一个包含鼠标 clientX 坐标的 reducer 操作来更新组件状态,以便渲染函数可以在拖动时绘制一些东西。
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 坐标的值获取到变量中。
虽然从 React 接收的事件和从直接附加到 DOM 的事件处理程序接收的事件可能看起来相似,但实际上它们是不同的。 React 不会给你一个原始的 DOM 事件,而是一个 SyntheticEvent,因此在 Reason 中它们被赋予了不同的类型,这就是类型错误通知你的。您不能在需要 ReactEvent.Mouse.t
的地方使用 Dom.event
。在这种情况下 evt
是一个 Dom.event
,因为它是通过使用 bs-webapi
将事件处理程序直接附加到 DOM 来获取的,而 ReactEvent.Mouse.clientX
当然需要一个ReactEvent.Mouse.t
.
因此,您应该使用 Webapi.Dom.MouseEvent.clientX
,而不是使用 ReactEvent.Mouse.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
中的所有内容,但会记录和限制您操作的类型。
我正在尝试在 table 上实现动态列大小调整(例如在 Excel 或 Google 表格中)。
在我的渲染函数中,当用户在我的调整大小控件上单击鼠标时,我使用 handle
回调:
<div
className="resizer"
onMouseDown={self.handle(handleColumnResizeStart)}
/>
在处理程序中,我想为 mousemove 添加一个新的事件侦听器,这样当用户 "dragging" 我们可以绘制一些东西来指示新列边缘的结束位置。
在 mousemove 处理程序中,我想我可以发送一个包含鼠标 clientX 坐标的 reducer 操作来更新组件状态,以便渲染函数可以在拖动时绘制一些东西。
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 坐标的值获取到变量中。
虽然从 React 接收的事件和从直接附加到 DOM 的事件处理程序接收的事件可能看起来相似,但实际上它们是不同的。 React 不会给你一个原始的 DOM 事件,而是一个 SyntheticEvent,因此在 Reason 中它们被赋予了不同的类型,这就是类型错误通知你的。您不能在需要 ReactEvent.Mouse.t
的地方使用 Dom.event
。在这种情况下 evt
是一个 Dom.event
,因为它是通过使用 bs-webapi
将事件处理程序直接附加到 DOM 来获取的,而 ReactEvent.Mouse.clientX
当然需要一个ReactEvent.Mouse.t
.
因此,您应该使用 Webapi.Dom.MouseEvent.clientX
,而不是使用 ReactEvent.Mouse.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
中的所有内容,但会记录和限制您操作的类型。