사용자 지정 파일 끌어서 놓기 구성 요소 만들기
13190 단어 javascriptprogrammingreact
이 구성 요소에 대한 dropRef라는 참조를 만듭니다.
React.useState()
후크를 사용하여 각각 false 및 ''로 초기화된 끌기 및 파일 이름 변수를 만듭니다. 변수dragCounter
및 드래그는 파일을 드래그하고 있는지 확인하는 데 사용되며 파일 이름은 드롭된 파일의 이름을 저장하는 데 사용됩니다.handleDrag
, handleDragIn
, handleDragOut
및 handleDrop 메서드를 만들어 끌어서 놓기 기능을 처리하고 구성 요소의 컨텍스트에 바인딩합니다. 각 메서드는 특정 이벤트, React.useEffect()
후크 및 연결된 cleanup()
메서드에서 생성 및 제거되는 리스너를 처리합니다. handleDrag
는 브라우저가 드래그한 파일을 열지 못하게 하고, handleDragIn
및 handleDragOut
는 드래그한 파일이 구성 요소에 들어가고 나가는 것을 처리하고, handleDrop
는 드롭되는 파일을 처리하고 props.handleDrop
에 전달합니다. 적절한 스타일<div>
을 반환하고 드래그 및 파일 이름을 사용하여 내용과 스타일을 결정합니다. 마지막으로 생성된 <div>
의 참조를 dropRef
에 바인딩합니다.FileDrop.jsx
function FileDrop(props) {
const [drag, setDrag] = React.useState(false);
const [filename, setFilename] = React.useState('');
let dropRef = React.createRef();
let dragCounter = 0;
const handleDrag = e => {
e.preventDefault();
e.stopPropagation();
};
const handleDragIn = e => {
e.preventDefault();
e.stopPropagation();
dragCounter++;
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);
};
const handleDragOut = e => {
e.preventDefault();
e.stopPropagation();
dragCounter--;
if (dragCounter === 0) setDrag(false);
};
const handleDrop = e => {
e.preventDefault();
e.stopPropagation();
setDrag(false);
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
props.handleDrop(e.dataTransfer.files[0]);
setFilename(e.dataTransfer.files[0].name);
e.dataTransfer.clearData();
dragCounter = 0;
}
};
React.useEffect(() => {
let div = dropRef.current;
div.addEventListener("dragenter", handleDragIn);
div.addEventListener("dragleave", handleDragOut);
div.addEventListener("dragover", handleDrag);
div.addEventListener("drop", handleDrop);
return function cleanup() {
div.removeEventListener("dragenter", handleDragIn);
div.removeEventListener("dragleave", handleDragOut);
div.removeEventListener("dragover", handleDrag);
div.removeEventListener("drop", handleDrop);
};
});
return (
<div
ref={dropRef}
className={
drag ? "filedrop drag" : filename ? "filedrop ready" : "filedrop"
}
>
{filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}
</div>
);
}
스타일.css
.filedrop {
min-height: 120px;
border: 3px solid #D3D3D3;
text-align: center;
font-size: 24px;
padding: 32px;
border-radius: 4px;
}
.filedrop.drag {
border: 3px dashed #1E90FF;
}
.filedrop.ready {
border: 3px solid #32CD32;
}
App.jsx
ReactDOM.render(<FileDrop handleDrop={console.log}/>, document.getElementById('root'));
사용자 지정 파일 DnD 구성 요소를 즐기십시오.
Reference
이 문제에 관하여(사용자 지정 파일 끌어서 놓기 구성 요소 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/satel/creating-custom-file-drag-and-drop-component-3pie텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)