web-dev-qa-db-fra.com

L'aperçu de l'image React-Dropzone ne s'affiche pas

Utiliser react-dropzone ( https://www.npmjs.com/package/react-dropzone ) et obtenir la journalisation des fichiers sur la console, mais impossible d'obtenir l'aperçu des images lors d'un changement d'état. Une idée de ce que je fais mal?

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>
    )
}

};

reactjsdropzone.js
7
megkadams

Bonne réponse à ceci: être un mannequin et j'ai oublié de le lier.

<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/

10
megkadams

Vous stockez des fichiers dans imageFiles, mais dans la méthode render, vous mappez sur un tableau this.state.files. 

Changement:

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

À: 

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

Ou, puisque vous avez cette constante const files = this.state.imageFiles, vous pouvez modifier l'instruction mentionnée en:

<div>{files.map((file) => <img src={file.preview} /> )}</div>
7
Alexandr Lazarev

Changez votre fonction de rendu en imageFiles

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>
    )
0
Piyush.kapoor