web-dev-qa-db-ja.com

Reactでのマウス座標の取得

JQueryを使用して、Reactの要素内のマウスの相対座標を取得しようとしています。

私のコードは機能していないようで、コンソールエラーはありません。

コード：

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関数）

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はリアクションでNiceをプレイしないと聞いています。私の構文は正しいですか、それとも完全に良い方法がありますか？

ありがとうございました。

javascriptjqueryreactjs
18
Quesofat

他の人が言ったように、問題は、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>;
  }
}

ペン例： http://codepen.io/CarlosEME/pen/ZLVbWp

42
Carlos Martinez

これはあなたのために働くはずです：

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

問題（およびjQueryと反応がうまくいかない理由）は、jQueryがイベントリスナーをアタッチしようとするまでに、reactがその要素をDOMにレンダリングしていない可能性があります。

Reactsメソッドを使用してイベントリスナーをアタッチする必要があります。 https://facebook.github.io/react/docs/events.html#mouse-events

0
Gustavo Suarez