云策 WordPress 开发者社区

块编辑器开发文档

DropZone

查看官方原文 ↗
💡 云策文档标注

概述

DropZone 是一个 WordPress 组件，用于创建覆盖父元素全尺寸的拖放区域，支持文件、HTML 内容或其他 HTML 拖放事件的处理。

关键要点

  • DropZone 组件可集成到 React 应用中，通过 @wordpress/components 导入。
  • 支持多种拖放类型：文件、HTML 和通用事件，分别对应 onFilesDrop、onHTMLDrop 和 onDrop 回调函数。
  • 提供可配置属性，如 className 用于样式定制，label 用于显示提示文本。

代码示例

import { useState } from 'react';
import { DropZone } from '@wordpress/components';

const MyDropZone = () => {
    const [ hasDropped, setHasDropped ] = useState( false );

    return (
        <div>
            { hasDropped ? 'Dropped!' : 'Drop something here' }
            <DropZone
                onFilesDrop={ () => setHasDropped( true ) }
                onHTMLDrop={ () => setHasDropped( true ) }
                onDrop={ () => setHasDropped( true ) }
            />
        </div>
    );
}

注意事项

  • onFilesDrop、onHTMLDrop 和 onDrop 均为可选属性，默认值为 noop，需根据实际拖放类型实现相应逻辑。
  • label 属性默认显示 "Drop files to upload"，可自定义以提供更明确的用户指引。
📄 原文内容

DropZone is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.

Usage

import { useState } from 'react';
import { DropZone } from '@wordpress/components';

const MyDropZone = () => {
    const [ hasDropped, setHasDropped ] = useState( false );

    return (
        <div>
            { hasDropped ? 'Dropped!' : 'Drop something here' }
            <DropZone
                onFilesDrop={ () => setHasDropped( true ) }
                onHTMLDrop={ () => setHasDropped( true ) }
                onDrop={ () => setHasDropped( true ) }
            />
        </div>
    );
}

Props

The component accepts the following props:

className

A CSS class to give to the wrapper element.

  • Type: String
  • Default: undefined

label

A string to be shown within the drop zone area.

  • Type: String
  • Default: Drop files to upload

onFilesDrop

The function is called when dropping a file into the DropZone. It receives an array of dropped files as an argument.

  • Type: Function
  • Required: No
  • Default: noop

onHTMLDrop

The function is called when dropping HTML into the DropZone. It receives the HTML being dropped as an argument.

  • Type: Function
  • Required: No
  • Default: noop

onDrop

The function is generic drop handler called if the onFilesDrop or onHTMLDrop are not called. It receives the drop event object as an argument.

  • Type: Function
  • Required: No
  • Default: noop