使用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>
)
}
};
正确答案：成为一个假人,忘了绑这个.
<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>
