0

コンポーネントのドキュメント アップロード セクションでの作業。ユーザーはファイルをドロップしてアップロードできます。ドロップ領域の下には、送信、キャンセル ボタン、および送信するファイルのリストがあります。キャンセル ボタンは、files配列をクリアする必要があります。

ただし、最初にクリックすると、ファイルがまだ存在するため、ファイル名が出力されます。もう一度クリックすると、ファイルが消去されます。なぜこれが起こるのか分かりません。

問題の関数はhandleClick(event).

興味深いことに、ページにレンダリングされているファイルのリストはクリアされますが、配列console.logはhandleClick(event).

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { submitDocument } from '../../actions/documents';
import Dropzone from 'react-dropzone';

class SubmitDocuments extends Component {

    constructor() {
        super();
        this.state = {
            files: []
        }

        this.handleClick = this.handleClick.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.onDrop = this.onDrop.bind(this);
    }

    handleClick(event) {
        this.setState({
            files: []
        })
        console.log(this.state.files);

    }

    handleSubmit(event) {
        event.preventDefault();
        // console.log(this.state.files);
        // filesToBeSent.pus
    }

    onDrop(files) {
        // console.log(files);
        // files.push(this.state.files);
        this.setState({
            files
        });
    }

    render() {

        return (
            <form onSubmit={this.handleSubmit}>
                <div className='panel panel-default'>
                    <div className='panel-heading'>
                        <h4><strong>Submit Documents</strong></h4>
                    </div>

                    <div className='panel-body'>
                        <Dropzone className='dropzone' onDrop={this.onDrop}> 
                            <h3>Click to add files or drag files here to upload</h3>
                        </Dropzone>
                        <div>
                            {_.map(this.state.files, f =>
                                <h5 key={f.name}>{f.name} - {f.size} bytes</h5>
                            )}
                        </div>
                        <button type='submit' className='btn btn-primary'>Submit</button>
                        <button type='button' className='btn btn-danger' onClick={this.handleClick}>Cancel</button>
                    </div>
                </div>
            </form>
        ); 
    }
}

function mapStateToProps(state) {
    return {
        documents: state.home.documents
    }
}

export default connect(mapStateToProps, { submitDocument })(SubmitDocuments);
4

2 に答える 2

2

setState非同期で実行できます。

ハンドラーを次のように変更してみてください。

handleClick(event) {
    this.setState({
        files: []
    }, () => console.log(this.state.files));
}

コンソール ステートメントは、最初のクリックで期待どおりに出力されるはずです。

于 2017-12-07T19:27:37.483 に答える
0

handleClick(event)以下のようにメソッドで状態を設定してみてください。

handleClick(event) {
    this.setState({
        ...this.state, files: []
    })
}
于 2017-12-07T19:28:40.673 に答える