1

ファイルのアップロードに React dropzone を使用しています

<DropZone
            accept='.pdf,.pptx,.ppt,.docx,.doc,.xls,.xlsx,.xslx,.png,.xsl,.jpg,.jpeg,.gif,.zip'
            onDrop={ files => {
              this.handleFileDrop(files);
              this.dragLeaveHandler();
            } }
            onDragEnter={ this.dragOverHandler }
            onDragLeave={ this.dragLeaveHandler }
            multiple={ false }
            style={ { height: '100%' } }
          >

  dragOverHandler = () => {
    console.log('enter');
    this.setState({
      isDragOver: true,
    });
  };

  dragLeaveHandler = () => {
    console.log('exit');
    this.setState({
      isDragOver: false,
    });
  };

ファイルがドロップ ゾーンの上を移動すると、onDragLeave イベントが同時に発生します。

他のイベントを使用する必要がありますか? この問題を解決するにはどうすればよいですか?

4

2 に答える 2

2

pointer-events: none;ドラッグリーブを起動している要素で使用できます。これにより、dropzone イベントのオーバーライドは停止されますが、ドロップされたイベントと受け入れられたファイルの取得は引き続き許可されます。

于 2020-07-17T08:54:53.413 に答える
2

あなたが直面している問題は、パッケージの欠陥ではなく、DOM イベントdragEnterと混乱が原因である可能性が最も高いです。一部の要素では、特定の位置でそれらの上にカーソルを合わせると、親要素の上にカーソルを置いたとして登録されない場合があります。たとえば、表示された要素内にレンダリングされたプレーンな文字列の上端には細いスライバーがあります。ほとんどの場合、これはタグ内で発生します。dragLeavereact-dropzoneblock<p>

ドロップゾーン内でレンダリングされた子を見ることなく、特定の修正を与えることは不可能です。ただし、通常は、子のスタイリングをいじる必要があります。<p>たとえば、タグのサイズが 0 ピクセルに設定されているか、タグに置き換えられている場合、<span>タグは問題になりません。どちらのオプションも子の表示を妨げますが、これは残念ながら避けられません。

他のイベントの使用に関しては、運が悪いです。onDragEnterDropZone コンポーネントは、およびonDragLeaveHTML DOM イベントに依存しています。したがって、思いついた修正はコンポーネント自体を修正しません。

全体として、対処しなければならない残念な問題です。これに対処する最も簡単な方法は、ドロップゾーン内に最大 1 つのテキストを配置し、そのサイズを css: で 0 ピクセルに設定することですheight: 0px;。通常<div>の要素は問題を引き起こさないので、それらを使用して複雑なドロップゾーンを作成できます.

于 2019-01-09T17:00:34.597 に答える