我已經成功地通過單擊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>
uj5u.com熱心網友回復：
首先，您還需要防止 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)}
>
uj5u.com熱心網友回復：
希望下面的回答對你有幫助
請檢查以下代碼沙箱代碼，此解決方案在我看來效果很好..
作業解決方案
https://codesandbox.io/s/react-hook-form-materialui-forked-n6r5l?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/346278.html