Utilisation de réact-dresszone ( https://www.npmjs.com/package/react-dropzone ) et obtenir des fichiers se connecter à la console, mais ne pouvez pas obtenir l'aperçu de l'image pour renseigner sur le changement d'état. Aucune idée de ce que je fais mal? };
3 Réponses :
Vous stockez des fichiers dans changer: à: ou, car vous avez cette constante ImageFiles , mais dans Render Méthode de mappage sur Ceci.State.files Array. const fichiers = Ceci.state.ImageFiles , vous pouvez modifier l'instruction mentionnée sur:
Malheureusement ... {this.state.imagefiles.lgth> 0?
Mettez à jour votre message s'il vous plaît, il est difficile de lire le code du commentaire.
Publié la bonne réponse ci-dessous ~ Merci pour l'aide, LA!
Changer votre fonction de rendu sur 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>
)
réponse correcte à ceci: être un mannequin et oublié de lier cela.
Les accessoires JSX ne doivent pas utiliser .Bind (). Bind in constructeur.
Ne liez jamais une fonction directement dans l'appel de Dropzone Ondrop. L'inconvénient ici est à chaque fois que vous téléchargez une image ou lorsque votre composant rend votre composant / rappelle une nouvelle fonction sera créé dans Webpack Bundle.js et ainsi votre taille de fichier Bundle.js sera augmenté. Donc, au lieu de faire cela, la liaison dans le constructeur toujours, appelez cette référence dans la mesure du possible. Cela crée uniquement une nouvelle fonction lorsque les composants se chargent pour la première fois.