Javascript DropZone超出所需的div反应？

我有一个

dropZone

div，在这里我可以放置一个文件，它接收该文件并提供预览。用户还可以单击div并上传文件来执行相同的操作

我遇到一个问题，当我在应用程序中使用

addQuestion

按钮拖放文件（图像）时，它会更新该图像可见的所有

dropZone

div

我不知道如何使用户可以将鼠标悬停在所需的

dropZone

上以更新该特定区域。这是我的

DropZone

组件代码：

class DropZone extends Component {

  constructor(props) {
    super(props);
    this.state = {
      file: "",
      fileId: uuid(),
      className: "dropZone"
    };
    this.handleChange = this.handleChange.bind(this);
    this._onDragEnter = this._onDragEnter.bind(this);
    this._onDragLeave = this._onDragLeave.bind(this);
    this._onDragOver = this._onDragOver.bind(this);
    this._onDrop = this._onDrop.bind(this);
  }

  handleChange(file = "") {
    this.setState({
      file: URL.createObjectURL(file)
    });
    //document.getElementsByClassName("dropZone").style.backgroundImage = 'url(' + this.state.file + ')';
  }

  componentDidMount() {
    window.addEventListener("mouseup", this._onDragLeave);
    window.addEventListener("dragenter", this._onDragEnter);
    window.addEventListener("dragover", this._onDragOver);
    document
      .getElementById("dragbox")
      .addEventListener("dragleave", this._onDragLeave);
    window.addEventListener("drop", this._onDrop);
  }

  componentWillUnmount() {
    window.removeEventListener("mouseup", this._onDragLeave);
    window.removeEventListener("dragenter", this._onDragEnter);
    window.addEventListener("dragover", this._onDragOver);
    document
      .getElementById("dragbox")
      .removeEventListener("dragleave", this._onDragLeave);
    window.removeEventListener("drop", this._onDrop);
  }

  _onDragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
  }

  _onDragOver(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }

  _onDragLeave(e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
  }

  _onDrop(e, event) {
    e.preventDefault();
    this.handleChange(e.dataTransfer.files[0]);
    let files = e.dataTransfer.files;
    console.log("Files dropped: ", files);
    // Upload files
    console.log(this.state.file);
    return false;
  }

  render() {
    const uniqueId = this.state.fileId;
    return (
      <div>
        <input
          type="file"
          id={uniqueId}
          name={uniqueId}
          class="inputFile"
          onChange={e => this.handleChange(e.target.files[0])}
        />
        <label htmlFor={uniqueId} value={this.state.file}>
          {this.props.children}
          <div className="dropZone" id="dragbox" onChange={this.handleChange}>
            Drop or Choose File
            <img src={this.state.file} id="pic" name="file" accept="image/*" />
          </div>
        </label>
        <div />
      </div>
    );
  }
}

类DropZone扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件：“”，
fileId:uuid（），
类名：“dropZone”
};
this.handleChange=this.handleChange.bind（this）；
this.\u onDragEnter=this.\u onDragEnter.bind（this）；
这个；
this.\u onDragOver=this.\u onDragOver.bind（this）；
this._onDrop=this._onDrop.bind（this）；
}
handleChange（文件=“”）{
这是我的国家({
文件：URL.createObjectURL（文件）
});
//document.getElementsByClassName（“dropZone”）.style.backgroundImage='url（'+this.state.file+'）；
}
componentDidMount（）{
window.addEventListener（“mouseup”，this.\u ondragleef）；
window.addEventListener（“dragenter”，本文件）；
window.addEventListener（“dragover”，this.\u onDragOver）；
文件
.getElementById（“dragbox”）
.addEventListener（“dragleave”，本文件）；
window.addEventListener（“drop”，this.\u onDrop）；
}
组件将卸载（）{
window.removeEventListener（“mouseup”，this.\u ondragleef）；
window.removeEventListener（“dragenter”，this.\u onDragEnter）；
window.addEventListener（“dragover”，this.\u onDragOver）；
文件
.getElementById（“dragbox”）
.removeEventListener（“dragleave”，本._ondragleef）；
window.removeEventListener（“drop”，this.\u onDrop）；
}
_昂德拉金特（e）{
e、 停止传播（）；
e、 预防默认值（）；
返回false；
}
_昂德拉戈弗（e）{
e、 预防默认值（）；
e、 停止传播（）；
返回false；
}
_昂德拉格（e）{
e、 停止传播（）；
e、 预防默认值（）；
返回false；
}
_昂德罗普（e，事件）{
e、 预防默认值（）；
this.handleChange（e.dataTransfer.files[0]）；
让files=e.dataTransfer.files；
log（“已删除的文件：”，文件）；
//上传文件
log（this.state.file）；
返回false；
}
render（）{
const uniqueId=this.state.fileId；
返回(
this.handleChange（e.target.files[0]）]
/>
{this.props.children}
删除或选择文件
);
}
}

---

我对反应和JS还不熟悉，所以正确方向的解释和/或提示也会很有帮助。谢谢

我认为问题在于，您正在为每个dropzone在窗口上附加ondrop事件。这样，所有DropZone都在侦听从所有其他DropZone激发的所有事件，导致它们成倍增加。好的，我会试着自己解决这个问题。谢谢你的提示！