简体中文

useDropZone

Tags:

Element

一个 React Hook，允许您创建一个拖放区。

演示

尝试从您的电脑拖放一个 PNG 文件，或者通过下方的图像测试 over 状态。

源码

IsOverDropZone:

false

Drop files here

(The photo below is merely a image, NOT a file. You need to drop files here from your explorer to see files list)

No files dropped 🤷

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook 🎨 Demo 📄 Document

API

const { isOverDropZone, files } = useDropZone(elementTarget, options)

元素目标 ElementTarget

ElementTarget 是一个联合类型，代表可以被定位的各种元素。

更多详情，请参见 ElementTarget 或 ElementTarget 类型。

选项 Options

export type UseDropZoneOptions = {
  /**
   * 被拖放区域接受的文件类型。
   */
  dataTypes?: string[] | ((types: readonly string[]) => boolean)
  /**
   * 当用户在拖放区域放下文件时调用的回调函数。
   */
  onDrop?: (files: File[] | null, event: DragEvent) => void
  /**
   * 当用户将文件拖到拖放区域上方时调用的回调函数。
   */
  onEnter?: (files: File[] | null, event: DragEvent) => void
  /**
   * 当用户将文件从拖放区域拖出时调用的回调函数。
   */
  onLeave?: (files: File[] | null, event: DragEvent) => void
  /**
   * 当用户在拖放区域上方拖动文件时调用的回调函数。
   */
  onOver?: (files: File[] | null, event: DragEvent) => void
}

返回值

export type UseDropZoneReturns = {
  /**
   * 在拖放区域中放下的文件。
   */
  files: File[] | null
  /**
   * 用户当前是否正在拖动文件到拖放区域上方。
   */
  isOverDropZone: boolean
}

ON THIS PAGE

#useDropZone

#演示

#用法

#源码

#API

#元素目标 ElementTarget

#选项 Options

#返回值

useDropZone

演示

用法

源码

API

元素目标 ElementTarget

选项 Options

返回值