obtenir les coordonnées de la souris en de Réagir et de jQuery

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

Mon code ne semble pas fonctionner et il n'y a pas les erreurs de la 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 jQuery ne débite pas jouer gentil avec réagir. Est ma syntaxe correcte ou est-il une meilleure façon entièrement?

Merci.

e.syntheticEvent à partir d'un onMouseMove réagir de rappel m'a aidé

InformationsquelleAutor Quesofat | 2017-02-11

44

Comme d'autres l'ont mentionné, le problème est que réagir a pas rendu de votre composante pour les DOM lorsque jQuery tente de joindre l'écouteur d'événement.

Vous n'avez pas besoin de jQuery pour faire tout cela, une meilleure approche est d'utiliser la Réagir événements:
```
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 stylet: https://codepen.io/CarlosEME/pen/XWWpVMp
- Carlos. Je vous remercie pour votre réponse. Comment pourrais-je l'utiliser pour obtenir les coordonnées sont relatives à l' #waldo division. Ne réagit ont un offset ()?
- Oui, vous pourrez obtenir l'élément DOM à l'aide de nativeEvent et l'utilisation e.nativeEvent.offsetX et e.nativeEvent.offsetY
- Pardon pour mon ignorance, mais je ne pouvais pas le trouver dans la documentation (un utilisateur a posté un lien pour ce ci-dessous). Comment aurais-je saisir l'élément? La chose la plus proche que je vois, c'est à l'aide de réagir dom et à l'aide de findDOMNode ou quelque chose comme ça. Je vous remercie beaucoup. Je vais accepter cela comme une réponse sous peu.
- Ont un look un refs à Réagir, vous pouvez donner tout composant de référence: <div ref="element" /> et ensuite vous pouvez faire const elem = this.refs.element pour obtenir l'Élément DOM lui-même. (Dans les anciennes versions de Réagir vous devez utiliser this.refs.element.getDOMNode()). Le stylo que j'ai posté a un exemple sur la façon de le faire.
- Quand j'ai mis onMouseMove={this._onMouseMove.bind(this)} sur le div parent du composant, uniquement lorsque la souris se déplace dans l'élément h1 t-il mettre à jour l'état, quand j'ai essayer de mettre le code dans la balise img, qui est un enfant de la div principale, l'état ne change pas du tout et apparemment il ne sait pas qu'un gestionnaire d'événement existe. Comment puis-je résoudre ce problème de manière de mouvement dans l'img rend une nouvelle x coordonnée y de la.
- Je ne suis pas sûr que sur ce qui ne fonctionne pas pour vous, si vous pouviez poster un exemple de plume, il serait plus facile à déboguer. Regardez, j'ai mis à jour la plume de déplacer le gestionnaire d'événement à une image: codepen.io/CarlosEME/stylo/ZLVbWp
- Carlos, vous avez été incroyables. Il travaille dans codepen. Pas besoin de partager. Est-il possible son d'un problème lié à mon propriétés css?
- C'EST une question css merci beaucoup! Vous devriez avoir un bouton de la pointe' lol
- Haha, tu es la bienvenue, heureux de vous aider 🙂
- Quelqu'un a couru à travers un exemple similaire pour Réagir > 15?
- Je me demandais ce qui n'a pas de travail pour vous? J'ai eu ce même exemple de travail dans la dernière version de Réagir. Oui, vous pouvez réécrire à l'aide d'apatride, de composants et de crochets, mais c'est la même idée.
- Voici le même exemple avec Réagissent 16 codepen.io/CarlosEME/stylo/XWWpVMp
InformationsquelleAutor Carlos Martinez
0

La question (et la raison de jQuery et de réagir ne vont pas bien ensemble) est susceptible de réagir n'a pas rendu les DOM cet élément par le temps jQuery est d'essayer de fixer l'écouteur d'événement.

Vous devriez regarder pour la fixation des écouteurs d'événement, réagit à l'aide de méthodes. https://facebook.github.io/react/docs/events.html#mouse-events

InformationsquelleAutor Gustavo Suarez
-1

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 + ")");
    });
});
```
- Pourquoi diable était-ce downvoted? Étant qu'il utilise un différé de référence, c'est la garantie de travailler comme il s'attache à des éléments, même si elles ne sont pas dans les DOM, comme le temps de la liaison se produit. Basé sur ops question, c'est une solution valable.
- Ne pas downvote - mais c'est l'introduction d'une Réagir anti-modèle. Il devrait y avoir aucun besoin de s'appuyer sur jQuery lors de l'utilisation de Réagir. Cela fonctionne? Assurez-vous. Est-il juste? Pas tellement
InformationsquelleAutor Eric

Vous devez vous connecter pour publier un commentaire.