web-dev-qa-db-fra.com

obtenir les coordonnées de la souris dans React

J'essaie d'obtenir les coordonnées relatives de la souris dans un élément de React à l'aide de jQuery. 

Mon code ne semble pas fonctionner et il n'y a pas d'erreur de console. 

code: 

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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's Waldo</title>
  </head>

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

  </body>
</html>

ja.js (fonction 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+")");
 });
});

composant 

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

J'entends dire que jQuery ne joue pas à Nice avec react. Ma syntaxe est-elle correcte ou existe-t-il une meilleure solution? 

Je vous remercie.

javascriptjqueryreactjs
15
Quesofat

Comme d'autres l'ont mentionné, le problème est que react n'a pas rendu votre composant dans le DOM lorsque jQuery essaie d'attacher l'écouteur d'événement.

Vous n'avez pas du tout besoin de jQuery, une meilleure approche consiste à utiliser les événements 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>;
  }
}

exemple de stylo: http://codepen.io/CarlosEME/pen/ZLVbWp

35
Carlos Martinez

Cela devrait fonctionner pour vous:

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

Le problème (et la raison pour laquelle jQuery et Réaction ne vont pas bien ensemble) est probable: Réaction n’a pas restitué au DOM cet élément au moment où jQuery tente d’attacher le programme d’écoute des événements.

Vous devriez envisager de joindre des écouteurs d'événement à l'aide de méthodes de réaction. https://facebook.github.io/react/docs/events.html#mouse-events

0
Gustavo Suarez