web-dev-qa-db-ja.com

React onDropは起動していません

以下は、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>)
  }
}
reactjstypescript
11
Psb

最後に問題が発生しました、何らかの理由でonDragOverを次のように処理する必要があります：

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

これで問題が解決しました。

27
Psb

デフォルトのondragoverイベントを防ぐだけで機能します。

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

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

イベントを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>
    )
  }
4
Piyush Bhati
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")
}
1
Savandy

関数を呼び出して起動する必要があります（括弧を使用）：

render() {
    return (
      <div>
        onDragEnter={this.onDragEnter}
        onDragOver={() => { return false }}
        onDrop={files => this.onFileDrop()}> // you were missing the "()"
        Drag and drop file here
      </div>)
  }
1
Rodius
window.ondragover = function(e) { e.preventDefault(); return false };
window.ondrop = function(e) { e.preventDefault(); return false };
0
Makoto Hirata