时间戳

首页 > 解决方案 > 在 React 中拖动 Div 中的图像时如何防止在新选项卡中打开

javascript - 在 React 中拖动 Div 中的图像时如何防止在新选项卡中打开

问题描述

我已通过单击成功实现添加多个图像browser button。我的问题是当我想拖动图像/图像时。它会打开一个新选项卡。如何防止它打开？我已经放e.preventDefault()了，但它还在打开。

Codesandbox 在这里 点击这里

    <Paper elevation={4} className={classes.mainContainer}>
      <div
        className={classes.dropzone}
        style={{
          border: "2px dashed #000000"
        }}
        onDragOver={(e) => e.preventDefault()}
        onDrop={(e) => uploadImage(e.currentTarget.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>

标签： javascriptreactjsecmascript-6react-hooks

解决方案

首先，您还需要在 onDrop 处理程序上防止默认设置。此外，来自 onDrop 的事件与 onChange 事件不同，因此您需要以不同的方式处理它。这是一个例子：

const handleDrop = (e) => {
  // Note: preventDefault is on nativeEvent
  e.nativeEvent.preventDefault()
  if (!e) return;
  // Note: files are under nativeEvent.dataTransfer
  const files = e.nativeEvent.dataTransfer.files;
  const fileList = Array.from(files);
  const images = fileList.map((image) => ({
    imageName: image.name,
    imageFile: image
  }));
  console.log(images);
};

并像这样传递事件：

<div
  className={classes.dropzone}
  style={{
    border: "2px dashed #000000"
  }}
  onDragOver={(e) => e.preventDefault()}
  onDrop={(e) => handleDrop(e)}
 >

推荐阅读