D&D時にFeedbackを返して、D&Dに対応していることを知らせる
https://i.gyazo.com/6b6a6164171c44a86f94812dd2785431.gif
例
code:ts
import React, { useState } from 'react';
function UploadField() {
function handleDragOver(e) {
e.preventDefault();
setIsDragging(true);
}
function handleDragLeave(e) {
e.preventDefault();
setIsDragging(false);
}
function handleDrop(e) {
e.preventDefault();
setIsDragging(false);
// ここでファイルを処理する
}
return (
<div
className={isDragging ? 'drag-over' : ''}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
ここにD&Dできます
</div>
);
}
isDraggingで状態を保持