ReactJS DropZone浏览器尝试在拖放时打开文件

试图实现

Dropzone

组件，但运气不佳。我是不是遗漏了什么

import { useState } from 'react';
import { useDropzone } from 'react-dropzone';
import styled from 'styled-components';

export const FilDataForm = (props) => {
    const [files, setFiles] = useState([])
    const getColor = (props) => {
        if (props.isDragAccept) return '#00e676';
        if (props.isDragReject) return '#ff1744';
        if (props.isDragActive) return '#2196f3';
        return '#eeeeee';
    }
    const onDrop = (file) => {
        console.log('HERE!!!!!')
        let nf = files;
        nf.push(file)
        setFiles(nf)
    }
    const Container = styled.div`
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        border-width: 2px;
        border-radius: 2px;
        border-color: ${props => getColor(props)};
        border-style: dashed;
        background-color: #fafafa;
        color: #bdbdbd;
        outline: none;
        transition: border .24s ease-in-out;
    `
    const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone(onDrop);
    return (
        <div className="modal">
            <div className="dialog" style={{ width: "25%", marginBottom: "50px" }}>
                <div className="header"><h2>File Uploader</h2></div>
                <div className="content">
                    <Container {...getRootProps({ isDragActive, isDragAccept, isDragReject })}>
                        <input {...getInputProps()} />
                        <p>Drag 'n' drop some files here, or click to select files</p>
                    </Container>
                    <div className="grid-container" style={{ marginTop: "20px", height: "250px" }}></div>
                </div>
            </div>
        </div>
    )
}

从'react'导入{useState}；
从“react dropzone”导入{useDropzone}；
从“样式化组件”导入样式化；
导出常量FilDataForm=（道具）=>{
const[files，setFiles]=useState（[]）
const getColor=（道具）=>{
如果（道具isDragAccept）返回“#00e676”；
if（props.isDragReject）返回“#ff1744”；
如果（道具isDragActive）返回“#2196f3”；
返回“#eeeeee”；
}
const onDrop=（文件）=>{
console.log（'HERE！！！！！'））
设nf=文件；
推送（文件）
设置文件（nf）
}
const Container=styled.div`
弹性：1；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
填充：20px；
边框宽度：2倍；
边界半径：2px；
边框颜色：${props=>getColor（props）}；
边框样式：虚线；
背景色：#fafafa；
颜色：#bdbd；
大纲：无；
过渡：边界。24秒轻松进出；
`
const{getRootProps，getInputProps，isDragActive，isDragAccept，isDragReject}=useDropzone（onDrop）；
返回(
文件上传
将一些文件拖放到此处，或单击以选择文件

)
}

将文件拖动到拖放区域会导致浏览器启动一个新选项卡，试图打开该文件。感谢您的帮助

编辑

---

单击Dropzone也不会打开文件对话框。

您需要防止默认事件

{...getRootProps({
                  className: 'dropzone',
                  onDrop: (event) => event.preventDefault(),
                })}

我正在使用基于类组件的React Dropzone，这就是我停止默认事件的方式

{...getRootProps({
                  className: 'dropzone',
                  onDrop: (event) => event.preventDefault(),
                })}

完整代码

<Dropzone onDrop={ (files) => fileHandling(files) } >
            {({ getRootProps, getInputProps }) => (
              <div
                {...getRootProps({
                  className: 'dropzone',
                  onDrop: (event) => event.preventDefault(),
                })}
                
                style={{ border: '1px solid #707070' }}
              >
                <input {...getInputProps()} />
                <h3  style={{ cursor: 'pointer' }}>
                  Drag &amp; Drop file or click here to Upload
                </h3>
                
              </div>
            )}
          </Dropzone>

文件处理（文件）}>
{（{getRootProps，getInputProps}）=>(
event.preventDefault（），
})}
style={{border:'1px solid#707070'}}
>
拖放；删除文件或单击此处上载
)}

---

如果浏览器打开“新建”选项卡，您单击dropzone，但没有打开“文件”对话框，这意味着dropzone可能与某些内容（div、span等）重叠，希望这会有所帮助。