Функция onMouseDown для файла

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 к контексту класса, я подозреваю, что он второй.

По какой причине вы не используете функции стрелок в этом случае?

fix:

catchItem(e) {

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

    or

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


}