setFiles(e.target.files)}
/>
{files &&
);
}
```
它能跑，但只要你想用第二次，缝合的痕迹就藏不住了。隐藏的 `` 仍然在你的渲染树里，你的样式重置必须考虑它的存在。重置选中状态需要写 `inputRef.current.value = ""`——这种命令式的副作用，React 的 lint 规则会跳出来警告你。要是你想在异步处理逻辑里 `await` 用户的选择（比如想在一个处理文件的 async handler 里），你还得自己造一个一次性的 promise。
而且你没法在同一个页面上重复使用同一个组件两次而不让 ref 互相打架。如果用户连续选择同一个文件，第二次 `change` 事件根本不会触发——这是历代 React 开发者都踩过的著名陷阱。
### ReactUse 的方式：useFileDialog
`useFileDialog` 把整个 input 元素从渲染树里抬出去，交给你一个 `[files, open, reset]` 的元组：
```tsx
import { useFileDialog } from "@reactuses/core";
function ImagePicker() {
const [files, open, reset] = useFileDialog({
multiple: true,
accept: "image/*",
});
return (
已选 {files.length} 个文件
}
{files && (
);
}
```
手动版本忽略的三件小事，但都很重要：
1. **没有隐藏 DOM**。input 在内存里创建，不在你的渲染树里。组件输出就是按钮本身。
2. **每次调用都能传参**。在 `open()` 上直接传选项，可以覆盖 Hook 级别的默认值。想让同一个选择器既能选文档又能选图片？调用时再传 `accept` 就行。
3. **真正的重置**。`reset()` 同时清空 React state 和底层 input，所以同一个文件可以再选一次。
`open()` 函数还会返回一个 promise，resolve 时给你已选的文件。这让异步流程清爽得多：
```tsx
const handleUpload = async () => {
const picked = await open();
if (!picked) return;
await uploadAll(Array.from(picked));
};
```
你不再需要把逻辑切分到 `onChange` 和按钮的点击处理函数之间。选择器就是一个可以 `await` 的函数。
## 2. 拖放文件区
### 手动实现
拖放是那种"教程里看着简单，生产环境里裂得稀碎"的 API。最直白的版本：
```tsx
function ManualDropZone({ onFiles }: { onFiles: (f: File[]) => void }) {
const [over, setOver] = useState(false);
return (
-
{Array.from(files).map((file) => (
- {file.name} —— {(file.size / 1024).toFixed(1)} KB ))}
{
e.preventDefault();
setOver(true);
}}
onDragLeave={() => setOver(false)}
onDrop={(e) => {
e.preventDefault();
setOver(false);
onFiles(Array.from(e.dataTransfer.files));
}}
style={{
border: over ? "2px solid blue" : "2px dashed gray",
padding: 40,
}}
>
把文件拖到这里
);
}
```
这个版本看似没问题，直到用户拖到子元素上时一切都崩了。光标一踏进子元素，浏览器就在父元素上触发 `dragleave`，尽管从逻辑上看文件还在区域内。你的边框开始闪烁，`over` state 变成谎言。要正确修复它，你得用计数器跟踪 `dragenter` 和 `dragleave`，每次离开就减一，只有当计数器归零时才认定文件"离开"了。还得记得在 `dragover` 上调 `preventDefault`——否则 drop 根本不会触发——并且记住 `dataTransfer.files` 是 `FileList` 而不是数组。
大多数生产环境里的拖放区都做错了。闪烁就是破绽。
### ReactUse 的方式：useDropZone
`useDropZone` 替你跳完了这套计数器舞蹈：
```tsx
import { useRef } from "react";
import { useDropZone } from "@reactuses/core";
function CsvDropZone() {
const dropRef = useRef{isOver ? "松开以上传" : "把 CSV 文件拖到这里"}