0

Подскажите как передать в функцию getMouse контекст нашего объекта, что бы оно видело console.log(this.ourdiv.style);

import React from "react";

class Main extends React.Component { constructor(props) { super(props); let deltaX; let deltaY; this.state = { divStyle: { width: "1000px", height: "500px", outline: "1px solid red", position: "relative" }, move: { width: "200px", height: "100px", outline: "1px solid green", position: "absolute"

  }
}

}

getMouse(e) { console.log(this.ourdiv.style);

}

MouseDown(e) { var mousePosX = e.pageX; var mousePosY = e.pageY; console.log(this.ourdiv.style); var divPosX = this.ourdiv.offsetLeft; var divPosY = this.ourdiv.offsetTop; this.deltaX = mousePosX - divPosX; this.deltaY = mousePosY - divPosY; window.addEventListener("mousemove", this.getMouse); this.ourdiv.onmouseup = function() { window.removeEventListener("mousemove", this.getMouse); } }

render() {

return ( <
  div >
  <
  div style = {
    this.state.divStyle
  } >
  <
  div style = {
    this.state.move
  }
  ref = {
    (ourdiv) => this.ourdiv = ourdiv
  }
  onMouseDown = {
    this.MouseDown.bind(this)
  } > < /div> <
  /div> <
  /div>
)

} }

export default Main;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

введите сюда описание изображения

Sinevik
  • 569

0 Answers0