onMouseDown for file的函数

Question

我的输入类型是文件。我正在为文件顺序定义onMouseDown函数，更改文件预览的位置。我得到以下错误: TypeError:无法设置未定义的属性'left‘

 <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

this.style似乎是未定义的

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";
    }
    ...
}

因为您没有将this.onmousemove的上下文绑定到类的上下文，所以我怀疑它是第二个。

在这种情况下，您不使用箭头函数的原因是什么？

修复：

catchItem(e) {

    this.onmousemove = (e) => {
       ...
    }

    or

    this.onmousemove = function(e){
       ...
    }
    this.onmousemove.bind(this);


}