无需外部库即可进行 React 拖放操作

Question

我试图在不使用任何外部依赖项或插件的情况下使用正常的反应代码查找文件上传。

任何人都可以帮我解决拖放文件上传的问题。任何 fiddle 将不胜感激

我刚刚尝试使用普通文件上传并增加填充

<input type="file" className="inputFile" name="file"  onChange={(e)=>this.props.onChangeHandler(event)} />

和css作为

.inputFile {
    left: 29%;
    padding: 10px 159px 433px 0px;
    position: absolute;
    opacity: 0;
}

现在我有了区域，但是拖放时没有触发 onChange 这是我的反应代码

onChangeHandler(event){
        this.setState({
          selectedFile: event.target.files[0]
        });
        this.onClickHandler();
      };
      onClickHandler = () => {
        const data = new FormData();
        data.append("file", this.state.selectedFile);
        axios
          .post("http://localhost:8080/api/assetlibrary/ms/upload", data, {
            onUploadProgress: ProgressEvent => {
              this.setState({
                //loaded: 100
                loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100
              });
            }
          })
          .then(res => {
            this.setState({
                warningToast:true
            })
            setTimeout(() => {this.setState({warningToast:false})},5000);
          });
      };

任何人都可以帮助我解决为什么拖动时不会触发 onChange 并且 drop.Any 工作 fiddle 将不胜感激。

注意：请不要有任何外部反应dependeny/plugin

Answer 1

你做得很好，但你应该使用 onDrop() synthetic event 而不是 onChange()。

这样做：

<input
  type="file"
  className="inputFile"
  name="file"
  onDrop={e => this.props.onChangeHandler(event)}
/>

这里有一个fiddle来测试它：

无需外部库即可进行 React 拖放操作

React Drag and Drop possible without external library

user-interface

drag-and-drop

reactjs

react-native