Javascript 在 React 和 jQuery 中获取鼠标坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42182481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getting mouse coordinates in React and jQuery
提问by Quesofat
I am trying to get the relative coordinates of the mouse in an element in React using jQuery.
我正在尝试使用 jQuery 在 React 中的元素中获取鼠标的相对坐标。
My code doesn't seem to be working and there are no console errors.
我的代码似乎不起作用，并且没有控制台错误。
code:
代码：
index.html
索引.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)
ja.js（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+")");
});
});
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?
我听说 jQuery 不太适合 React。我的语法正确还是完全有更好的方法？
Thank you.
谢谢你。
回答by Carlos Martinez
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.
正如其他人所提到的，问题是当 jQuery 尝试附加事件侦听器时，react 没有将您的组件呈现到 DOM。
You don't need jQuery to do this at all, a better approach is to use the React events:
您根本不需要 jQuery 来执行此操作，更好的方法是使用 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>;
}
}
Example pen: https://codepen.io/CarlosEME/pen/XWWpVMp
回答by Gustavo Suarez
The issue (and the reason jQuery and react don't go well together) is likely that react has not rendered to the DOM that element by the time jQuery is trying to attach the event listener.
问题（以及 jQuery 和 react 不能很好地结合在一起的原因）很可能是在 jQuery 尝试附加事件侦听器时，react 尚未将该元素呈现给 DOM。
You should look at attaching event listeners using reacts methods. https://facebook.github.io/react/docs/events.html#mouse-events
您应该查看使用 reacts 方法附加事件侦听器。https://facebook.github.io/react/docs/events.html#mouse-events
回答by Eric
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 + ")");
});
});
