使用react-dropzone(https://www.npmjs.com/package/react-dropzone)并将文件记录到控制台,但无法获取图像预览以填充状态更改。知道我在做什么错吗?
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>
)
}
};
最佳答案
对此的正确答案:是个假人,忘了绑定(bind)它。
<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/
关于reactjs - React-Dropzone图片预览未显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38349421/