reactjs - 无需外部库即可进行 React Drag and Drop

Question

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

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

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

<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 没有在拖放时触发。任何工作的小提琴都将受到高度赞赏。

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

标签： reactjsreact-nativeuser-interfacedrag-and-drop

Answer 1

你做得很好，但你应该使用onDrop() 合成事件而不是onChange().

这将做：

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

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