时间戳

首页 > 解决方案 > 在 ReasonReact 中解构鼠标移动事件

reason - 在 ReasonReact 中解构鼠标移动事件

问题描述

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

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 中跟踪鼠标位置的正确方法。

标签： reasonreason-react

解决方案

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

ReactEventRe.Mouse.clientX(event)

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

推荐阅读