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

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

如图：

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

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

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

所以做出如下修改

<CopyOutlinedstyle={{ cursor: 'pointer' }}onClick={() => {if (navigator.clipboard && window.isSecureContext) {navigator.clipboard.writeText('要复制到剪贴板的地址');} else {// 降级到已弃用的 execCommandconst 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中移除临时输入框，避免页面污染。

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