Function for onMouseDown for file - reactjs

Question

I have input type as file.I am defining onMouseDown function for it.In order,change the position of file preview.I am getting the follwing error:
TypeError: Cannot set property 'left' of undefined
<input
type="file"
className="file"
id="file-browser-input"
name="file-browser-input"
ref ={input=>this.fileInput=input}
onDragOver={(e)=>{
e.preventDefault();
e.stopPropagation();
}
}
onDrop={this.onFileLoad.bind(this)
onChange={this.onFileLoad.bind(this)}
onMouseDown={this.catchItem.bind(this)}
/>
catchItem(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px";
this.style.top = e.pageY - this.clientHeight / 2 + "px";
this.onmousemove = function(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px";
this.style.top = e.pageY - this.clientHeight / 2 + "px";
}
this.onmouseup = function() {
this.onmousemove = null; // onmouseup event [ redirect mousemove event signal to null instead of the
drag-able element]
}
}

Answer 1

Seems like this.style is undefined
catchItem(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px"; // either this one
this.style.top = e.pageY - this.clientHeight / 2 + "px";
this.onmousemove = function(e) {
this.style.left = e.pageX - this.clientWidth / 2 + "px"; // or this one
this.style.top = e.pageY - this.clientHeight / 2 + "px";
}
...
}
Since you don't bind this.onmousemove's context to the class' context, I suspect it to be the second one.
Any reason you're not using arrow functions in this case?
fix:
catchItem(e) {
this.onmousemove = (e) => {
...
}
or
this.onmousemove = function(e){
...
}
this.onmousemove.bind(this);
}