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中解构鼠标移动事件

1 个答案: