React Image upload Dropzone

Question

私は少し問題があります。 私は反応のあるイメージアップローダーをコーディングしています。アップロードコンポーネントを作成しました。プレビューイメージを表示してから、バックエンドに送信してCDNにアップロードする前に表示したいと思います。 しかし、私は状態からプレビューを取得することができません。エラーはありません、それはちょうど状態からプレビューの小道具を得るように見えません。あなたの意見を知りたいです。

は、相続人は http://okonet.ru/react-dropzone/

それは、コードのこのビットだ

Answer 1

ありがとう私のコンポーネント

import React, { PropTypes } from 'react' 
 
var Dropzone = require('react-dropzone'); 
 
import './uploader.scss' 
 

 
class Uploader extends React.Component { 
 
    
 
    constructor(props){ 
 
     super(props) 
 
     this.state = { 
 
     files: [] 
 
     }; 
 
    } 
 

 
    onDrop(files) { 
 
     console.log(files); 
 
     let filename = files[0].name; 
 
     let preview = files[0].preview; 
 
     this.setState({ 
 
     files: files, 
 
     name: filename, 
 
     preview: preview 
 

 
     }); 
 
    } 
 
     
 

 
    render() { 
 
     return (
 
      <div className = 'dropzoneContainer' > 
 
      <Dropzone ref={(node) => { this.dropzone = node; }} onDrop={this.onDrop} className= 'zone' multiple={false}> 
 
       <div className = 'dropzone' >Upload Image</div> 
 
       {this.state.files.preview ? <div> 
 
       <img src={this.state.preview} /> 
 
       </div> : null} 
 
      </Dropzone> 
 
      </div> 
 
    ); 
 
    } 
 
} 
 

 
export default Uploader

私は、これはライブラリドラッグに反応し、ドロップ使用しています

です：

{this.state.files.preview ? <div> 
    <img src={this.state.preview} /> 
</div> : null} 

this.state.files.previewをthis.state.previewに変更しても問題ありません。

希望すると便利です。

Answer 2

はありません悲しい

files.length == 0? 
<Dropzone onDrop={this.onDrop.bind(this)}> 
<p>Try dropping some files here, or click to select files to upload. 
</p> 
</Dropzone> 
:<div>{files.map(f => <img src={f.preview} />)}</div>