实现一个复制input框中文本内容的功能

一、场景

有时候，有些项目需要在表单中显示一些数据，但是这些数据是禁止编辑的，但是我们可能还需要在其他的地方去使用输入框中的数据，为了更好的提升用户体验感，此时一个复制该框中文本内容的功能就显得尤为重要。效果如下：

二、如何去实现

我们知道ref 的基本用法是获取DOM元素，因此我们可以通过ref来获取想要操作的DOM元素，代码如下：

1、先声明inputRef这个ref类型

const inputRef = useRef<any>(null) //ts类型的声明
const inputRef = useRef()  //js类型的声明

2、通过ref获取DOM元素

 <Form.Item
                label="推送接口"
                name="sendInterface"
                className="api-form"
              >
                <Input
                  ref={inputRef}
                  disabled={true}
                  className="sendInterface"
                  addonAfter={
                    <a onClick={handleCopyClick}>
                      <AiIcon
                        type="#iconcopy"
                        color="#666666"
                        width={16}
                        height={16}
                        style={{ margin: '0 2px' }}
                      />
                    </a>
                  }
                />
              </Form.Item>

3、注册点击事件，并通过文档对象提供的一个execCommand方法获取到复制的内容，然后通过message.success提示复制成功.

message需要先引入,如下：

import {
  message,
} from 'antd';

const handleCopyClick = () => {
    //在选择节点的时候，一定要只选择input
    var copyDOM = document.querySelector('.sendInterface') //需要复制文字的节点
    var range = document.createRange() //创建一个range
    window.getSelection().removeAllRanges() //清楚页面中已有的selection
    range.selectNode(copyDOM) // 选中需要复制的节点
    window.getSelection().addRange(range) // 执行选中元素
    var successful = document.execCommand('copy') // 执行 copy 操作
    if (successful) {
      message.success('复制成功！')
    } else {
      message.warning('复制失败！')
    }
    // 移除选中的元素
    window.getSelection().removeAllRanges()
  }