React实现点击按钮复制操作【navigator.clipboard与document.execCommand】

做需求的时候看到有一个功能是点击复制图标，将内容复制到剪贴板中

如图：

然后我就下意识的写了这样一段代码

		<Row className='ConfigToolCopy'>
                     <div> {$t('下载地址')}</div>
                      <div>
                         <CopyOutlined
                             style={{ cursor: 'pointer' }}
                             onClick={() => {
                                 navigator.clipboard.writeText(
                                  	'要复制到剪贴板的地址'
                                 );
                                 message.success($t('com.Copysuccess'));
                             }}
                         />
                     </div>
                 </Row>

但是这样做有一个问题就是：
使用 navigator.clipboard.writeText() API（适用于 HTTPS 环境）不适合HTTP环境，所以测试检查出来HTTP环境无法复制

所以做出如下修改

<CopyOutlined
          style={{ cursor: 'pointer' }}
          onClick={() => {
              if (navigator.clipboard && window.isSecureContext) {
                  navigator.clipboard.writeText(
                     '要复制到剪贴板的地址'
                  );
              } else {
                  // 降级到已弃用的 execCommand
                  const input = document.createElement('input');
                  input.value =
                     '要复制到剪贴板的地址'
                  document.body.appendChild(input);
                  input.select();
                  document.execCommand('copy');
                  document.body.removeChild(input);
              }
              message.success($t('com.Copysuccess'));
          }}
      />

这段代码是一个降级复制方案的实现，用于在不支持现代 Clipboard API 的浏览器环境中实现复制功能。
代码作用分析：

1. 创建临时输入框

动态创建一个临时的 <input> 元素，用于承载要复制的文本内容。

2. 设置复制内容

将需要复制的下载链接赋值给临时输入框的 value 属性。

3. 添加到DOM

将临时输入框添加到页面中，使其成为可操作的元素。

4. 选中文本

自动选中输入框中的所有文本内容，为复制操作做准备。

5. 执行复制命令
使用已弃用的 execCommand('copy') 方法将选中的文本复制到剪贴板。

6. 清理临时元素
复制完成后，立即从DOM中移除临时输入框，避免页面污染。

这段代码主要用于支持较老的浏览器版本，确保复制功能在各种环境下都能正常工作，体现了代码的渐进增强设计理念。