webentwicklung-frage-antwort-db.com.de

mauskoordinaten in React erhalten

Ich versuche, die relativen Koordinaten der Maus in einem Element in React mit jQuery abzurufen. 

Mein Code scheint nicht zu funktionieren und es gibt keine Konsolenfehler. 

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-Funktion) 

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

komponente 

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

Ich höre, dass jQuery nicht nett mit reagieren spielt. Ist meine Syntax korrekt oder gibt es einen besseren Weg? 

Vielen Dank.

javascriptjqueryreactjs
15
Quesofat

Wie von anderen bereits erwähnt, besteht das Problem darin, dass das React Ihre Komponente nicht im DOM angezeigt hat, wenn jQuery versucht, den Ereignis-Listener anzuhängen.

Dazu brauchen Sie jQuery überhaupt nicht. Eine bessere Vorgehensweise ist die Verwendung der React-Ereignisse:

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

beispiel für einen Stift: http://codepen.io/CarlosEME/pen/ZLVbWp

35
Carlos Martinez

Das sollte für Sie funktionieren:

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

Das Problem (und der Grund, warum jQuery und reagieren nicht gut zusammenpassen) ist wahrscheinlich, dass reag das DOM nicht an das DOM gerendert hat, wenn jQuery versucht, den Ereignis-Listener anzuhängen.

Sie sollten sich Event-Listener mit Reaktionsmethoden anhängen. https://facebook.github.io/react/docs/events.html#mouse-events

0
Gustavo Suarez