내 react.js 앱에 대한 파일 업로드를 작성하려고합니다. 하지만 드래그 앤 드롭 영역이 제대로 작동하지 않습니다. 전파를 중지하고 끌어서 놓기 이벤트에서 Default를 방지하더라도 여전히 예상대로 작동하지 않습니다. 브라우저는 여전히 내 파일을 엽니 다.
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>
)
}
화살표 함수를 사용하는 경우 이벤트 리스너를 연결할 필요가 없습니다. 아래 코드를 사용하면 모든 이벤트가 위의 코드에서 본 유일한 문제는 숨겨진 입력 연결 이벤트에 대한 이벤트를 가장 바깥 쪽 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>
);
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다