Деструктуризация события Mouse Move в ReasonReact - PullRequest
Новая
       37

Деструктуризация события Mouse Move в ReasonReact

0 голосов
/ 02 декабря 2018

В настоящее время пытаюсь извлечь 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.

1 Ответ

0 голосов
/ 02 декабря 2018

Возможно, вы запутались, потому что ReactEventRe.Mouse.t - это не тип записи или JS-объекта, а абстрактный тип, которым вы манипулируете с помощью функций в ReactEventRe.Mouse.Это довольно просто перевести, хотя.Для доступа к свойству clientX вы используете функцию clientX.Полностью квалифицированный, он будет выглядеть так: 

ReactEventRe.Mouse.clientX(event)

PS: Вы, похоже, используете устаревшую версию ReasonReact.ReactEventRe был заменен на ReactEvent и ReactReact.stringToElement, например, ReasonReact.string.

...