Javascript 在React中拖放图像

我正在尝试使用React JS和显示缩略图的库来实现拖放行为

代码如下：

import React from "react";
import ReactDOM from "react-dom";
import Dropzone from "react-dropzone";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dropzone1: [],
      dropzone2: []
    };
  }

  addFilesToDropzone(files, dropzone) {
    let files_with_preview = [];
    files.map(file => {
      file["preview"] = URL.createObjectURL(file);
      files_with_preview.push(file);
    });

    const new_files = [...this.state[dropzone], ...files_with_preview];
    this.setState({ [dropzone]: new_files });
  }

  render() {

    return (
      <div className="App">
        <Dropzone
          onDrop={files => {
            this.addFilesToDropzone(files, "dropzone1");
          }}
        >
          {({ getRootProps, getInputProps }) => (
            <div {...getRootProps()} className="">
              <input {...getInputProps()} />
              <div style={{ height: 100, backgroundColor: "yellow" }}>
                Drop some files here
                {dropzone1.map(file => (
                  <img
                    src={file.preview}
                    alt={file.path}
                    style={{ width: 40, height: 40 }}
                  />
                ))}
              </div>
            </div>
          )}
        </Dropzone>

        <div style={{ display: "flex", flexDirection: "row", marginTop: 25 }}>
          <div style={{ width: "100%" }}>
            DROPZONE 2
            <Dropzone
              onDrop={files => {
                this.addFilesToDropzone(files, "dropzone2");
              }}
            >
              {({ getRootProps, getInputProps }) => (
                <div {...getRootProps()} className="">
                  <input {...getInputProps()} />
                  <div style={{ height: 100, backgroundColor: "yellow" }}>
                    Drop some files here
                    {this.state.dropzone2.map(file => (
                      <img
                        src={file.preview}
                        alt="dsds"
                        style={{ width: 40, height: 40 }}
                      />
                    ))}
                  </div>
                </div>
              )}
            </Dropzone>
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“react Dropzone”导入Dropzone；
导入“/styles.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
dropzone1:[]，
dropzone2:[]
};
}
addFilesToDropzone（文件，dropzone）{
让文件_与_预览=[]；
file.map（文件=>{
文件[“预览”]=URL.createObjectURL（文件）；
带预览的文件。推送（文件）；
});
const new_files=[…this.state[dropzone]，…带有预览的文件]；
this.setState（{[dropzone]：new_files}）；
}
render（）{
返回(
{
此.addFilesToDropzone（文件“dropzone1”）；
}}
>
{（{getRootProps，getInputProps}）=>(
把一些文件放在这里
{dropzone1.map（文件=>(
))}
)}
下降区2
{
这个.addFilesToDropzone（文件“dropzone2”）；
}}
>
{（{getRootProps，getInputProps}）=>(
把一些文件放在这里
{this.state.dropzone2.map（文件=>(
))}
)}
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

当我从计算机上的文件夹中拖动文件时，一切正常，但我希望能够将dropzone 1生成的缩略图拖动到dropzone 2。但这不起作用

你知道怎么做吗？
是的，这不起作用，因为react dropzone不是为这个设计的

简单的React钩子为文件创建一个兼容HTML5的拖放区

使用react dnd或react Beauty dnd。您可以使用另一个包：react file drop
您的代码沙盒示例不适用working@codeVerine你确定吗？我看没有问题。这就是我打开你的示例代码时得到的结果。代码
引用错误dropzone1未定义
@codevrine立即尝试正如Avin Kavish所说，使用
反应dnd
或
react Beauty dnd
代替此库来实现您所需的功能。此库无法实现此功能。但是，如果您只有两个dropzone，您可以通过单击图像（而不是拖动）将图像从一个dropzone移动到另一个dropzone，方法是编写一些附加的代码检查我的问题