在 React 和 jQuery 中获取鼠标坐标

IT技术 javascript jquery reactjs
2021-04-24 04:14:50

我正在尝试使用 jQuery 在 React 中的元素中获取鼠标的相对坐标。

我的代码似乎不起作用，并且没有控制台错误。

代码：

索引.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 函数） 

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

零件 

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

我听说 jQuery 在 React 方面表现不佳。我的语法正确还是完全有更好的方法？

谢谢你。

4个回答

正如其他人所提到的，问题是当 jQuery 尝试附加事件侦听器时，react 没有将您的组件呈现到 DOM。

您根本不需要 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>;
  }
}

示例笔：https : //codepen.io/CarlosEME/pen/XWWpVMp

你可以试试这个：

import React, { Component } from "react";

class ClassCursorPosition extends Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    };
  }

  logMousePosition = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    });
  };
  componentDidMount() {
    window.addEventListener("mousemove", this.logMousePosition);
  }
  render() {
    return (
      <div>
        X- {this.state.x} Y - {this.state.y}
      </div>
    );
  }
}

其实你可以考虑三件事，这里我提到clientX，clientY你可以搜索pageX，pageY和secrrenX，screenY。

pageX, pageY => 根据页面取决于鼠标位置。（可滚动页面）

screenX, screenY => 根据屏幕取决于鼠标位置（不同屏幕的高度和宽度）

问题（以及 jQuery 和 react 不能很好地配合使用的原因）很可能是在 jQuery 尝试附加事件侦听器时，react 尚未将该元素呈现给 DOM。

您应该查看使用 reacts 方法附加事件侦听器。https://facebook.github.io/react/docs/events.html#mouse-events

这应该适合你：

jQuery(function ($) {
    var x, y;
    $(document).on('mousemove', '#waldo', function (event) {
        x = event.pageX;
        y = event.pageY;
        $("#coords").html("(X: " + x + ", Y: " + y + ")");
    });
});
其它你可能感兴趣的问题
上一篇防止我的灯丝线轴打结？ 下一篇将 React JSX 对象转换为 HTML