Question

我想通过文件对话框以及通过拖放操作从计算机中插入文件。

为此，我有用于插入文件对话框的输入类型文件，以及用于拖放文件的拖放组件。

下面是我的代码，

Class AddfilesDiv extends react.Purecomponent {
    state = {
        files: [],
    }
    on_files_added = e => {
        let files;
        if (e.type==="drop") {
            files = Array.prototype.slice.call(e.dataTransfer.files);
        } else {
            files = Array.prototype.slice.call(e.target.files);
        }
            this.setState({files});
    }
    return (
        <DragAndDrop handle_drop={this.on_files_added}>
            <div className="files_container_wrapper">
                <div className="files_container">
                    <form onSubmit={this.handle_file_addition}>
                        <div className="file_names">
                            <label>
                                <div className="add_files_btn">
                                    <Svgplus/>
                                </div>
                                <input
                                    type="file"
                                    onChange={this.on_files_added}
                                    style={{ display: 'none' }}
                                    multiple 
                                />
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </DragAndDrop>);
    }

export class DragAndDrop extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            dragging: false,
        };
     }

     componentDidMount() {
         document.addEventListener('dragenter', this.handle_drag_in);
         document.addEventListener('dragleave', this.handle_drag_out);
         document.addEventListener('dragover', this.handle_drag);
         document.addEventListener('drop', this.handle_drop);
     }

     handle_drop = (e) => {
         this.props.handle_drop(e);
     }
     render () {
         return (
             //some code
         );
     }
 }

现在，on_files_added方法设置文件状态并在div中一一显示。

以上代码在一次选择文件并添加时列出了多个文件...但是当我添加一个文件时，它会显示在div中，当我再次打开文件对话框并选择另一个文件时，它将替换先前选择的文件。拖放也是一样。

我想要什么？

当我多重选择文件时，它应该列出所有文件，并且当我从文件对话框中选择一个文件时也添加它，它应该显示在文件div中，再次选择另一个文件应该也显示另一个文件，而不是替换...

我该如何解决。有人可以帮我吗谢谢。

如何使用reactjs通过拖放或文件对话框添加文件？

0 个答案: