Question

149

getting mouse coordinates in React and jQuery

rated 0 times [ 155] [ 6] / answers: 1 / hits: 103700 / 7 Years ago, sat, february 11, 2017, 12:00:00

I am trying to get the relative coordinates of the mouse in an element in React using jQuery.

My code doesn't seem to be working and there are no console errors.

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 (jQuery function)

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+));

 });

});

component

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

I hear jQuery doen't play nice with react. Is my syntax correct or is there a better way entirely?

Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pierre

Add To Favorites

Follow

Total Points: 716

Total Questions: 128

Total Answers: 102

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

answered 7 Years ago mireyag · Accepted Answer

As others have mentioned, the issue is that react has not rendered your component to the DOM when jQuery tries to attach the event listener.

You don't need jQuery to do this at all, a better approach is to use the React events:

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>;

  }

}

Example pen: https://codepen.io/CarlosEME/pen/XWWpVMp