无需外部库即可进行 React Drag and Drop答案

【问题标题】：React Drag and Drop possible without external library无需外部库即可进行 React Drag and Drop
【发布时间】：2019-12-27 06:19:19
【问题描述】：

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

谁能帮我解决拖放文件上传的问题。任何小提琴将不胜感激

我只是尝试了正常的文件上传并增加了填充

<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 没有在拖放时触发。任何工作的小提琴将不胜感激。

注意：请不要有任何外部反应依赖/插件

【问题讨论】：

标签： reactjs react-native user-interface drag-and-drop

【解决方案1】：

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

这样就可以了：

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

在这里你有一个小提琴来测试它：

【讨论】：