Получение координат мыши в React

Я пытаюсь получить относительные координаты мыши в элементе в React, используя jQuery.

Мой код, похоже, не работает, и никаких консольных ошибок нет.

код:

index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylesheets.css" >
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="ja.js" type="text/javascript"></script>

    <title>Where Waldo</title>
  </head>

    <div id="root"></div>

  </body>
</html>

ja.js(функция jQuery)

jQuery(function($) {
 var x,y;
 $("#waldo1").mousemove(function(event) {
     var offset = $(this).offset();
     x = event.pageX- offset.left;
     y = event.pageY- offset.top;
     $("#coords").html("(X: "+x+", Y: "+y+")");
 });
});

компонент

import React, { Component } from 'react'
import Timer from './timer'

class Level1 extends Component {

    render () {
      return (
      <div>
      <div id="gameBoard">
        <img id="waldo1" src={require('../images/waldo1(1).jpg')} alt="waldo"/>
      </div>
      <h2 id="coords"></h2>
      <Timer start={Date.now()}/>
      </div>
        ) // return
      } // render
    } //component

    export default Level1

Я слышал, что jQuery не играет хорошо, реагируя. Правильно ли мой синтаксис или есть лучший способ?

Спасибо.

Ответ 1

Как уже упоминали другие, проблема заключается в том, что реакция не отображала ваш компонент в DOM, когда jQuery пытается подключить прослушиватель событий.

Вам вообще не нужен jQuery, лучше использовать события React:

class Application extends React.Component {
  constructor(props) {
    super(props);

    this.state = { x: 0, y: 0 };
  }

  _onMouseMove(e) {
    this.setState({ x: e.screenX, y: e.screenY });
  }

  render() {
    const { x, y } = this.state;
    return <div onMouseMove={this._onMouseMove.bind(this)}>
      <h1>Mouse coordinates: { x } { y }</h1>
    </div>;
  }
}

Пример пера: https://codepen.io/CarlosEME/pen/XWWpVMp

Ответ 2

Проблема (и причина, по которой jQuery и реакция не идут хорошо вместе), вероятно, что реакция не передала DOM этому элементу к тому времени, когда jQuery пытается присоединить прослушиватель событий.

Вы должны посмотреть на прослушиватели событий, используя методы реагирования. https://facebook.github.io/react/docs/events.html#mouse-events

Ответ 3

Это должно сработать для вас:

jQuery(function ($) {
    var x, y;
    $(document).on('mousemove', '#waldo', function (event) {
        x = event.pageX;
        y = event.pageY;
        $("#coords").html("(X: " + x + ", Y: " + y + ")");
    });
});