请参阅 WordPress Storybook 以获取更详细、交互式的文档。

FormFileUpload 允许用户从其本地设备中选择文件。

import { FormFileUpload } from '@wordpress/components';

const MyFormFileUpload = () => (
  <FormFileUpload
    accept="image/*"
    onChange={ ( event ) => console.log( event.currentTarget.files ) }
  >
    Upload
  </FormFileUpload>
);

Props

accept

  • Type: string
  • Required: No

传递给 input 元素的字符串，用于告诉浏览器
文件类型
用户可以上传哪些类型。例如：image/*,video/*。

children

  • Type: ReactNode
  • Required: No

子元素将作为 Button 的子元素传递。

icon

  • Type: IconType | null
  • Required: No

要在默认按钮中渲染的图标。

有关更多信息，请参阅 Icon 组件文档。

multiple

  • Type: boolean
  • Required: No
  • Default: false

是否允许选择多个文件。

onChange

  • Type: ChangeEventHandler<HTMLInputElement, HTMLInputElement> | undefined
  • Required: Yes

直接传递给 input 文件元素的回调函数。

所选文件将在 event.currentTarget.files 中可用。

onClick

  • Type: MouseEventHandler<HTMLInputElement>
  • Required: No

直接传递给 input 文件元素的回调函数。

当希望用户在再次选择同一文件时触发 change 事件时，这非常有用。为此，请在 onClick 函数中将目标值设置为空字符串。

<FormFileUpload
  onClick={ ( event ) => ( event.target.value = '' ) }
  onChange={ onChange }
>
  Upload
</FormFileUpload>

render

  • Type: ((arg: { openFileDialog: () => void; }) => ReactNode)
  • Required: No

用于渲染 UI 的可选回调函数。

如果传递了此函数，组件不会渲染默认 UI（即一个按钮），而是调用此函数来渲染它。该函数接收一个包含属性 openFileDialog 的对象，这是一个函数，调用时会打开浏览器的原生文件上传模态窗口。