react-dropzoneでリストを作成する

Question

私はreact-dropzoneを使ってギャラリーを作成しようとしています。私は正常に画像を追加していますが、配列を作成するのではなく、私がgithubに従っていると思っていたので、別の画像をドラッグすると画像をロードして新しい画像に置き換えています。予期した結果は、既にドラッグしたイメージの横にイメージを追加することです。

files: [],と呼ばれる空の配列を指定して、イメージを収集すると思います。

私のクラスでのドロップゾーン要素は次のようになります。

let dropzoneRef; 

<Dropzone 
    ref={ 
     (node) => { 
      dropzoneRef = node; 
     } 
    } 
    onDrop={this.onDrop.bind(this)}> 
    <p>Drop files here.</p> 
</Dropzone> 
<RaisedButton 
    label="Upload File" 
    primary={false} 
    className="primary-button" 
    onClick={() => { dropzoneRef.open(); }} 
    /> 

    <ul> 
    { 
     this.state.files.map(f => 
      <li key={f.preview}> 
       <img className="dropped-image" src={f.preview} alt=""/> 
      </li>, 
     ) 
    } 
    </ul> 

あなたが検査するために私がWebpackBinに作業コードを追加

彼らのgithubのドキュメントがhere

ですこれが私の目標です画面。私は追加された単一のサムネイルをクリックして、それをフルサイズで表示している第2の部分を試していません。その部分については心配しないでください。私は、リストを収集し、必要な数だけ追加できるようにする必要があります。ここに期待される結果のスクリーンショットがあります。

は事前にありがとうございます（私は幼稚園の書き込みをお詫び申し上げます）

Answer 1

あなたは

onDrop(uploadedFile) { 
    this.setState({ 
     files: this.state.files.concat(uploadedFile), 
    }); 
} 

を次のようにあなたがしたいので、これはあなたのonDrop機能を更新するだけです新しいファイルをthis.state.files配列に追加します。

この更新情報はWebpackBinを参照してください。