拖放区域

DropZone 是一个组件，用于创建一个占据其父元素全部大小的拖放区域。它支持拖放文件、HTML 内容或任何其他 HTML 拖放事件。

用法

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>
    );
}

属性

该组件接受以下属性：

className

分配给包装元素的 CSS class。

• 类型：String
• 默认值：undefined

label

显示在拖放区域内的字符串。

• 类型：String
• 默认值：Drop files to upload

onFilesDrop

当将文件拖放到 DropZone 时调用此函数。它接收一个被拖放文件的数组作为参数。

• 类型：Function
• 是否必需：否
• 默认值：noop

onHTMLDrop

当将 HTML 拖放到 DropZone 时调用此函数。它接收被拖放的 HTML 作为参数。

• 类型：Function
• 是否必需：否
• 默认值：noop

onDrop

如果未调用 onFilesDrop 或 onHTMLDrop，则调用此通用拖放处理程序。它接收拖放 event 对象作为参数。

• 类型：Function
• 是否必需：否
• 默认值：noop