Reagieren-Dropzone-Vorschau nicht angezeigt

Verwendung reagieren-dropzone (https://www.npmjs.com/package/react-dropzone) und abrufen von Dateien-Protokollierung auf der Konsole, aber keine Bildvorschau zu füllen, auf Status ändern. Keine Ahnung, was ich falsch mache?

export default class JoinForm extends Component {
    constructor(props) {
    super(props)
        this.state = {
            imageFiles: []
    }
}

onDrop(imageFiles) {
    this.setState({
        imageFiles: imageFiles
    })
    console.log(imageFiles)  
}

render() {

    return(
        <form className='join-form' ref='joinForm' autoComplete='off'>
            <Dropzone
                onDrop={this.onDrop}
                className='dropzone'
                activeClassName='active-dropzone'
                multiple={false}>
      <div>Drag and drop or click to select a 550x550px file to upload.</div>
    </Dropzone>

            {this.state.imageFiles.length > 0 ? <div>
    <h2>Uploading {this.state.imageFiles.length} files...</h2>
    <div>{this.state.imageFiles.map((file) => <img src={file.preview} /> )}</div>
    </div> : null}
        </form>
    )
}

};

InformationsquelleAutor megkadams | 2016-07-13
  1. 12

    Richtige Antwort auf diese Frage: ein dummy vergessen und binden diese.

    <Dropzone
  onDrop={this.onDrop.bind(this)} //<= Here
  className='dropzone'
  activeClassName='active-dropzone'
  multiple={false}
  style={imageUploadStyle}>
    <div>Drag and drop or click to select a 550x550px file to upload.</div>
</Dropzone>

    https://toddmotto.com/react-create-class-versus-component/

    • JSX Requisiten nicht verwenden sollten .bind(). Binden im Konstruktor.
    • Nie binden, eine Funktion direkt in Dropzone onDrop nennen. Der Nachteil hier ist, jedes mal, wenn Sie ein Bild hochladen können, oder Wann immer Ihre Komponente rendert/neu gerendert, die eine neue Funktion erzeugt, in webpack bundle.js und damit Ihr bundle.js die Dateigröße wird erhöht. Also anstatt das zu tun, die verbindlich im Konstruktor immer dann aufrufen, Verweis, wo es erforderlich ist. Dies schafft nur eine neue Funktion, wenn die Komponenten lädt, die für die erste Zeit.
    InformationsquelleAutor megkadams
  2. 8

    Den Sie speichern Dateien in imageFiles, aber in render Methode, die Sie mapping über this.state.files array.

    Ändern:

    <div>{this.state.files.map((file) => <img src={file.preview} /> )}</div>

    Zu: 

    <div>{this.state.imageFiles.map((file) => <img src={file.preview} /> )}</div>

    Oder, weil Sie diese ständige const files = this.state.imageFiles können Sie ändern genannten Aussage zu:

    <div>{files.map((file) => <img src={file.preview} /> )}</div>
    • Definitive aktuelle typo und guten Fang, aber nicht das Problem, leider... {dies.Zustand.und Dokumenten.Länge > 0 ? <div> <h2>Hochladen von {dies.Zustand.und Dokumenten.Länge} diese.Zustand.Dokumenten...</h2> <div>{dies.Zustand.und Dokumenten.Karte((file) => <img src= " {file.Album Vorhören} /> )}</div> </div> : null} immer noch nicht aktualisieren. Bin ich einstellungsmodus irgendwie falsch?
    • Aktualisieren Sie Ihre post bitte, es ist schwer zum Lesen von code aus dem Kommentar.
    • Posted die richtige Antwort unter ~ Dank für die Hilfe, LA!
    InformationsquelleAutor Alexandr Lazarev
  3. 1

    Ändern Sie Ihre render-Funktion zu Dokumenten

    render() {
    const files = this.state.imageFiles

    return(
        <form className='join-form' ref='joinForm' autoComplete='off'>
            <Dropzone
                onDrop={this.onDrop}
                className='dropzone'
                activeClassName='active-dropzone'
                multiple={false}>
      <div>Drag and drop or click to select a 550x550px file to upload.</div>
    </Dropzone>

            {this.state.imageFiles.length > 0 ? <div>
    <h2>Uploading {this.state.imageFiles.length} files...</h2>
    <div>{this.state.imageFiles.map((file) => <img src={file.preview} /> )}</div>
    </div> : null}
        </form>
    )
    InformationsquelleAutor Piyush.kapoor
Schreibe einen Kommentar