我正在尝试为我的react.js应用编写文件上传。但是,我无法使拖放区域正常工作。 即使我停止了传播并阻止了拖放事件中的默认设置,它仍然无法按预期工作。浏览器仍然打开我的文件。
export default function DraggableUploader() {
const fileInput = useRef(null)
const [loadedFile, setLoadedFile] = useState(null)
const [isLoading, setIsLoading] = useState(false)
const handleDragEnter = e => {
e.preventDefault();
e.stopPropagation();
};
const handleDragLeave = e => {
e.preventDefault();
e.stopPropagation();
};
const handleDragOver = e => {
e.preventDefault();
e.stopPropagation();
};
const handleDrop = e => {
e.preventDefault();
e.stopPropagation();
};
function handleSubmit(e) {
e.preventDefault()
console.log(`current file`, loadedFile.name)
}
return (
<div className="dropzone">
<div className="sub-header">Drag your audio file here:</div>
<div className="draggable-container">
<input
type="file"
className="file-browser-input"
name="file-browser-input"
style={{display: "none"}}
ref={fileInput}
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
onDragEnter={e => handleDragEnter(e)}
onDragLeave={e => handleDragLeave(e)}
onChange={handleInputChange}
/>
<div className="file-browser-container">
<Button variant="outline-primary" onClick={handleInputClick}>Browse</Button>
</div>
</div>
<Button variant="primary" onClick={handleSubmit}>Submit</Button>
</div>
)
}
答案 0 :(得分:2)
很明显,我没有useEffect来添加事件侦听器。.如果您添加以下代码,则所有工作均按预期进行:
useEffect(() => {
let div = dropRef.current;
div.addEventListener('dragenter', handleDragEnter);
div.addEventListener('dragleave', handleDragLeave);
div.addEventListener('dragover', handleDragOver);
div.addEventListener('drop', handleDrop);
return function cleanup() {
div.removeEventListener('dragenter', handleDragEnter);
div.removeEventListener('dragleave', handleDragLeave);
div.removeEventListener('dragover', handleDragOver);
div.removeEventListener('drop', handleDrop);
};
});
答案 1 :(得分:1)
如果使用箭头功能,则不需要附加事件侦听器。使用下面的代码,所有事件都将起作用。在上面的代码中,我看到的唯一问题是将隐藏事件上的附加事件附加到最外部的div上,它将起作用。祝你好运!
export default function App() {
const handleDragEnter = e => {
e.preventDefault();
console.log("drag enter");
};
const handleDragLeave = e => {
e.preventDefault();
console.log("drag leave");
};
const handleDragOver = e => {
e.preventDefault();
console.log("drag over");
};
const handleDrop = e => {
e.preventDefault();
console.log("drag drop");
};
const handleInputChange = () => {};
return (
<div
className="dropzone"
onDrop={e => handleDrop(e)}
onDragOver={e => handleDragOver(e)}
onDragEnter={e => handleDragEnter(e)}
onDragLeave={e => handleDragLeave(e)}
onChange={handleInputChange}
>
<div className="sub-header">Drag your audio file here:</div>
<div className="draggable-container">
<input
type="file"
className="file-browser-input"
name="file-browser-input"
style={{ display: "none" }}
/>
</div>
</div>
);
}