React on Drop이 실행되지 않습니다.

React on Drop이 실행되지 않습니다.

다음은 제가 사용하려는 샘플 코드인 react + TypeScript입니다.onDragEnter 및 onDragOver는 정상적으로 동작하지만 onDrop 이벤트는 동작하지 않습니다.

import * as React from 'react';

export class FileZone extends React.Component {

  onDragOver = (e) => {
    let event = e as Event;
    event.stopPropagation();
  }

  onDragEnter = (e) => {
    let event = e as Event;
    event.stopPropagation();
  }

  onFileDrop = (e) => {
    let event = e as Event;
    event.stopPropagation();

    console.log("onFileDrop");
    alert("dropped")
  }

  render() {
    return (
      <div
        onDragEnter={this.onDragEnter}
        onDragOver={this.onDragOver}
        onDrop={this.onFileDrop}>
        Drag and drop file here
      </div>)
  }
}

마침내 문제가 발생하였습니다.어떤 이유로든 onDragOver를 다음과 같이 처리해야 합니다.

onDragOver = (e) => {
let event = e as Event;
event.stopPropagation();
event.preventDefault();
}

이것으로 내 문제가 해결되었다.

디폴트 온드래그오버이벤트를 방지하기만 하면 동작합니다.

onDragOver = (event) => {
    event.preventDefault();
}

---

return (<div onDragOver={this.onDragOver} {...others}>{children}</div>);

이벤트를 할당해야 하는 코드에 문제가 있습니다.div

render() {
    return (
      <div //you have to remove additional > from here
        onDragEnter={this.onDragEnter}
        onDragOver={this.onDragOver}
        onDrop={this.onFileDrop}>
        Drag and drop file here
      </div>
    )
  }

window.ondragover = function(e) { e.preventDefault(); return false };
window.ondrop = function(e) { e.preventDefault(); return false };

브라우저는 기본적으로 "drop" 액션을 방지하므로 이를 방지해야 합니다! event.provent Default()는 말씀하신 대로 처리합니다.

onDrop={files => this.onFileDrop}>

이것은 다음과 같습니다.

onDrop={this.onFileDrop}>

'this'를 사용하여 함수를 호출할 때 생성자에 함수가 있어야 합니다.

constructor(props) {
    super(props);

    this.onFileDrop = this.onFileDrop.bind(this);
  }

기능:

onFileDrop(event) { 
 event.preventDefault(); 
 console.log("qwerty")
}

기능을 기동하려면 , 다음의 기능을 호출할 필요가 있습니다(괄호 사용).

render() {
    return (
      <div>
        onDragEnter={this.onDragEnter}
        onDragOver={() => { return false }}
        onDrop={files => this.onFileDrop()}> // you were missing the "()"
        Drag and drop file here
      </div>)
  }

언급URL : https://stackoverflow.com/questions/50230048/react-ondrop-is-not-firing