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

Posted 2023-02-22

【中文标题】在 React 中拖动 Div 中的图像时如何防止在新选项卡中打开

【英文标题】：How do I Prevent Opening in New Tab When Dragging Image/s in Div in React

【发布时间】：2021-12-17 14:23:03

【问题描述】：

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

Codesandbox 在这里 CLICK HERE

    <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>

【参考方案1】：

首先，您还需要在 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)
 >

【参考方案2】：

希望下面的回答对你有帮助

请检查以下代码沙箱代码，这个解决方案对我来说很好..

工作解决方案

https://codesandbox.io/s/react-hook-form-materialui-forked-n6r5l?file=/src/App.js