React-Dropzone图片预览未显示 [英] React-Dropzone image preview not showing
本文介绍了React-Dropzone图片预览未显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用react-dropzone( https://www.npmjs.com/package/react-dropzone ),并将文件记录到控制台,但无法获取状态更改时填充的图像预览。知道我在做什么错吗?
Using react-dropzone (https://www.npmjs.com/package/react-dropzone) and getting files logging to the console, but can't get image preview to populate on state change. Any idea what I'm doing wrong?
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>
)
}
};
推荐答案
正确的答案:是个假人,忘了绑定它。
Correct answer to this: being a dummy and forgot to bind this.
<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/
这篇关于React-Dropzone图片预览未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文