web-dev-qa-db-ja.com

React-Dropzone画像プレビューが表示されない

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

};

reactjsdropzone.js
10
megkadams

これに対する正解：ダミーであり、これをバインドするのを忘れた。

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

13
megkadams

ファイルはimageFilesに保存していますが、renderメソッドではthis.state.files配列。

変化する：

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

に：

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

または、この定数const files = this.state.imageFiles、上記のステートメントを次のように変更できます。

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

レンダリング関数を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>
    )
1
Piyush.kapoor