React中拖拽图片到Div时如何阻止跳转打开新标签页？

问题根因 #

• 仅给onDragOver添加了e.preventDefault()，但onDrop事件触发时没有阻止默认行为，浏览器默认会将拖拽的文件识别为待打开的资源，因此会自动打开新标签页
• 拖拽场景下的文件获取逻辑错误：拖拽操作的文件不存在于e.currentTarget.files中，而是存储在e.dataTransfer.files对象内

修复步骤 #

1. 给onDrop事件回调优先添加e.preventDefault()，阻止浏览器默认打开文件的行为
2. 调整拖拽场景的文件获取逻辑，从e.dataTransfer.files中读取拖拽的文件
3. 可选补充onDragEnter事件的阻止默认逻辑，兼容更多浏览器场景

修复后的代码片段 #

<Paper elevation={4} className={classes.mainContainer}>
  <div
    className={classes.dropzone}
    style={{
      border: "2px dashed #000000"
    }}
    onDragEnter={(e) => e.preventDefault()}
    onDragOver={(e) => e.preventDefault()}
    onDrop={(e) => {
      e.preventDefault()
      // 拖拽场景从dataTransfer对象中获取文件
      uploadImage(e.dataTransfer.files)
    }}
  >
    <div>
    </div>
    <div>
      <h3 className={classes.dragHereText}>Drag & Drop Images here</h3>
      <p className={classes.or}>or</p>
      <Button
        size="small"
        variant="contained"
        component="label"
        color="primary"
      >
        <input
          type="file"
          accept="image/*"
          multiple
          className={classes.uploadInput}
          onChange={(e) => uploadImage(e.currentTarget.files)}
        />
        Browse files
      </Button>
    </div>
  </div>
</Paper>

内容的提问来源于stack exchange，提问作者Joseph