web-dev-qa-db-fra.com

React onDrop ne se déclenche pas

Voici l'exemple de code que j'essaie d'utiliser, qui est react + TypeScript. onDragEnter et onDragOver fonctionnent correctement mais pas l'événement 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

Enfin, j'ai eu le problème, pour une raison quelconque, je dois gérer le onDragOver comme ceci:

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

cela a résolu mon problème.

27
Psb

Il suffit d'empêcher l'événement ondragover par défaut, puis cela fonctionne.

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

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

Il y a un problème dans votre code, vous devez affecter un événement à 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}>

Cela devrait devenir ceci:

onDrop={this.onFileDrop}>

Et comme vous utilisez 'this. "Pour appeler la fonction, vous en aurez besoin dans le constructeur:

constructor(props) {
    super(props);

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

Une fonction:

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

Vous devez appeler la fonction pour la lancer (utilisez les parenthèses):

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