質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

4842閲覧

react-dropzoneでドラッグ&ドロップ実装する方法

ricy

総合スコア48

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/03/14 04:40

react-dropzoneでドラッグ&ドロップ実装で相談させてください。
windowにいれたときに、ドロップ窓が出現して、そこにdropできるような仕様にしたいです。
windowオブジェクトでdragover、dragleaveでリスナー登録して試しているのですが、
ドロップ窓にファイルをいれたところで、dragover、dragleaveイベントが交互に発火して
想定通りに動きません。slackやchatworkのような添付ファイル仕様を実現するには
どうすればよいでしょうか。

import React, { Component, PropTypes } from "react" import ReactDOM from "react-dom" import Dropzone from "react-dropzone" export default class AttachmentForm extends Component { constructor(props) { super(props) this.state = { file: null, fileUrl: "", dragging: false, inDropzone: false } } componentDidMount() { this.dragoverListener = document.addEventListener("dragover", ::this.onDragOver); this.dragleaveListener = document.addEventListener("dragleave", ::this.onDragLeave); } componentWillUnmount() { this.dragoverListener.remove(); this.dragleaveListener.remove(); } handleSubmit(file) { // アップロード処理 } onDrop(files) { _.each(files, ::this.handleSubmit); this.setState({ dragging: false }) } onDragOver(e) { e.preventDefault(); e.stopPropagation(); if (!this.state.dragging) { this.setState({ dragging: true }) } } onDragEnter(e) { e.preventDefault(); this.setState({ inDropzone: true }) this.setState({ dragging: true }) } onDragLeave(e) { // e.preventDefault(); console.log("onDragLeave") // this.setState({ dragging: true, inDropzone: false }) if (this.state.dragging) { this.setState({ dragging: false }) } } onDragStart(e) { // e.preventDefault(); console.log("onDragStart") // // this.setState({ dragging: true, inDropzone: false }) // if (this.state.dragging) { // this.setState({ // dragging: false // }) // } } render() { return ( <div className="file-form-container"> <div onDragOver={this.dragOver}></div> <Dropzone className="chatroom-dropzone" ref="dropzone" onDrop={::this.onDrop} onDragEnter={::this.onDragEnter} multiple={true} dragging={true} > {this.state.dragging && <div className="dragging">dropzone area</div> } </Dropzone> </div> ) } }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Dropzone自体ですでにイベントリスナーを登録しているのに、

javascript

1 componentDidMount() { 2 this.dragoverListener = document.addEventListener("dragover", ::this.onDragOver); 3 this.dragleaveListener = document.addEventListener("dragleave", ::this.onDragLeave); 4 } 5

と、イベントリスナーを登録、しかもdocumentで。
不要と思われますが。

投稿2017/03/14 11:48

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ricy

2017/03/14 13:46

ご回答ありがとうございます。windowやdocumentにイベントを登録しない場合、ドロップゾーンにドラッグしたときにしかイベント発火しないためです。window枠にはいったときに、ドロップゾーンを表示するイベント発火させたいためです。こちらを消す、だけの対応ではだめでした。(もともとつけていなくて、今回実現したいことのためにつけてみました、やり方間違っていましたらまたご返信いただけると幸いです。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問