amis button actionType": "copy" 中点击按钮 调用接口获取数据 后拼接页面已有文本 复制demo

这是一个比较完整的demo：

import React, { useState } from 'react';
import { Button } from 'amis';

function CopyButton({ payload, children, onSuccess, onError }) {
  const [loading, setLoading] = useState(false);

  const handleClick = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch('/your/api/url', {
        method: 'POST',
        body: JSON.stringify(payload),
        headers: {
          'Content-Type': 'application/json',
        },
      });

      if (!response.ok) {
        throw new Error('Failed to copy');
      }

      const data = await response.json();
      const textToCopy = data.textToCopy; // 接口返回的需要拼接的文本
      const currentText = window.getSelection().toString();
      const finalText = currentText ? `${currentText}\n${textToCopy}` : textToCopy;

      const textarea = document.createElement('textarea');
      textarea.value = finalText;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);

      if (onSuccess) {
        onSuccess();
      }
    } catch (err) {
      console.error(err);
      if (onError) {
        onError();
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <Button
      type="button"
      level="primary"
      disabled={loading}
      onClick={handleClick}
    >
      {loading ? 'Loading...' : children}
    </Button>
  );
}

export default CopyButton;

上面的代码中，我们定义了一个名为 `CopyButton` 的组件，它接收以下属性：

- `payload`：一个对象，包含需要传递给接口的数据。
- `children`：按钮的文本。
- `onSuccess`：一个回调函数，在复制成功时调用。
- `onError`：一个回调函数，在复制失败时调用。

当用户点击按钮时，`CopyButton` 组件会先调用接口获取需要拼接的文本，然后将当前页面已有的文本和接口返回的文本拼接起来，最后将拼接后的文本复制到剪贴板中。

注意，我们使用了一个 `textarea` 元素来实现复制功能，这是因为在某些浏览器中，直接将文本复制到剪贴板可能会失败。