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