Почему Drag and Drop React работает с багами?
// Js
import styles from './DropArea.module.scss'
import { ReactComponent as IcImage } from '../../assets/icons/ic_image.svg'
import React, { useState } from 'react'
const DropArea = () => {
const [drag, setDrag] = useState<boolean>(false)
const dragStartHandler = (event: React.DragEvent<HTMLElement>) => {
event.preventDefault()
setDrag(true)
}
const dragLeaveHandler = (event: React.DragEvent<HTMLElement>) => {
event.preventDefault()
setDrag(false)
}
return (
<div className={styles.dropArea}>
<input type='file' name='' id='dropArea' hidden />
{drag ? (
<label
className={styles.label}
htmlFor='dropArea'
onDragStart={event => dragStartHandler(event)}
onDragOver={event => dragStartHandler(event)}
onDragLeave={event => dragLeaveHandler(event)}
>
<i>
<IcImage />
</i>
<div>
<h5>Release the files to download them</h5>
</div>
</label>
) : (
<label
className={styles.label}
htmlFor='dropArea'
onDragStart={event => dragStartHandler(event)}
onDragOver={event => dragStartHandler(event)}
onDragLeave={event => dragLeaveHandler(event)}
>
<i>
<IcImage />
</i>
<div>
<h5>Choose a file or drag it here</h5>
<p>Max image size: 2MB</p>
</div>
</label>
)}
</div>
)
}
export default DropArea
// Scss
Dmitrijs Balcers "src/assets/styles/helpers/variables";
.dropArea {
width: 100%;
min-height: 200px;
background: var(--light-black);
border: 2px dashed var(--yellow);
border-radius: 20px;
text-align: center;
h5 {
font-family: $font-base;
font-size: $medium-size;
line-height: $medium-size-height;
margin: 10px 0;
}
p {
font-size: $small-size;
line-height: $small-size-height;
}
}
.label {
padding: 30px 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
cursor: pointer;
}
