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 回答