在 ReasonReact 中解构鼠标移动事件

Question

目前正在尝试在 Reason React 中取消 clientX 鼠标移动事件。这是当前的组件：

type state = {
  count: int,
  hover: bool,
  mouseX: int,
  mouseY: int,
};

type action =
  | Hover
  | MouseMove(ReactEventRe.Mouse.t);

let component = ReasonReact.reducerComponent("EventTracking");

let make = _children => {
  ...component,

  initialState: () => { count: 0, hover: false, mouseX: 0, mouseY: 0 },

  reducer: (action, state) =>
      switch (action) {
      | Hover => ReasonReact.Update({ ...state, hover: !state.hover })
      | MouseMove(event) => ReasonReact.Update({ ...state, mouseX: state.mouseX + 1})
      },

    render: self =>{
      let hoverString = "Hover State => " ++ string_of_bool(self.state.hover);


      <div className="statistics" onMouseEnter={_event => self.send(Hover)} onMouseLeave={_event => self.send(Hover)} onMouseMove={event => self.send(MouseMove(event))}>
        <p>
          (ReasonReact.stringToElement(hoverString))
        </p>
        <p>
          (ReasonReact.stringToElement(string_of_int(self.state.mouseX)))
        </p>
      </div> 
    },
};

我假设我需要更改的代码在我的减速器的 MouseMove 操作中，mouseX 需要更新为 clientX 但我似乎无法拉动它关闭事件对象而不抛出错误。

任何建议都很好，我也不知道使用这些合成事件是否是在 ReasonReact 中跟踪鼠标位置的正确方法。

Answer 1

您可能会感到困惑，因为ReactEventRe.Mouse.t不是记录或JS对象类型，而是您使用ReactEventRe.Mouse中的函数操作的抽象类型。虽然翻译起来很简单。要访问 clientX 属性，您可以使用 clientX 函数。完全合格的看起来像：

ReactEventRe.Mouse.clientX(event)

PS：您使用的似乎是 ReasonReact 的过时版本。例如，ReactEventRe 已被 ReactEvent 和 ReactReact.stringToElement 替换为 ReasonReact.string。

在 ReasonReact 中解构鼠标移动事件

De-structuring Mouse Move event in ReasonReact

reason

reason-react