云策 WordPress 开发者社区

块编辑器开发文档

ClipboardButton

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

概述

ClipboardButton 是一个已弃用的 WordPress 组件，用于通过点击复制文本或其他元素。开发者应改用 @wordpress/compose 包中的 useCopyToClipboard Hook。

关键要点

  • ClipboardButton 已弃用，推荐使用 useCopyToClipboard Hook 替代。
  • 组件接受 text、onCopy、onFinishCopy 等 props，其中 text 为必填项。
  • 支持继承 Button 组件的 props，如 className。

代码示例

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

const MyClipboardButton = () => {
    const [ hasCopied, setHasCopied ] = useState( false );
    return (
        <ClipboardButton
            variant="primary"
            text="Text to be copied."
            onCopy={ () => setHasCopied( true ) }
            onFinishCopy={ () => setHasCopied( false ) }
        >
            { hasCopied ? 'Copied!' : 'Copy Text' }
        </ClipboardButton>
    );
};

注意事项

  • onCopy 和 onFinishCopy props 分别用于处理复制开始和完成时的回调。
  • 组件基于 Button 组件构建，可传递额外 props 给底层 Button。
📄 原文内容
This component is deprecated. Please use the `useCopyToClipboard` hook from the `@wordpress/compose` package instead.

With a clipboard button, users copy text (or other elements) with a single click or tap.

Clipboard button component

Usage

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

const MyClipboardButton = () => {
    const [ hasCopied, setHasCopied ] = useState( false );
    return (
        <ClipboardButton
            variant="primary"
            text="Text to be copied."
            onCopy={ () => setHasCopied( true ) }
            onFinishCopy={ () => setHasCopied( false ) }
        >
            { hasCopied ? 'Copied!' : 'Copy Text' }
        </ClipboardButton>
    );
};

Props

The component accepts the following props:

className

The class that will be added to the classes of the underlying <Button> component.

  • Type: string
  • Required: no

text

The text that will be copied to the clipboard.

  • Type: string
  • Required: yes

onCopy

The function that will be called when the text is copied.

— Type: () => void
— Required: yes

onFinishCopy

The function that will be called when the text is copied and the copy animation is finished.

— Type: () => void
— Required: no

Inherited props

Any additional props will be passed the underlying <Button/> component. See the Button component for more details on the available props.