Подскажите как передать в функцию 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>
