Geek Answers Handbook

Getting mouse coordinates in React

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

My code does not seem to work, and there are no console errors.

the 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 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 heard jQuery doesn't play well while reacting. Is my syntax correct or is there a better way?

Thanks.

+20
javascript jquery reactjs
source share
3 answers

As others have already mentioned, the problem is that the reaction did not display your component in the DOM when jQuery tries to attach an event listener.

You don't need jQuery at all, it's better to use 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

+44
source share

The problem (and the reason jQuery and reaction do not go well together) is likely that the reaction did not pass the DOM to this element by the time jQuery tries to attach an event listener.

You should look at event listeners using response methods. https://facebook.imtqy.com/react/docs/events.html#mouse-events

0
source share

This should work for you:

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

More articles:


All Articles