一、场景

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

二、如何去实现

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

1、先声明inputRef这个ref类型

const inputRef = useRef<any>(null)

2、通过ref获取DOM元素

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

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

const handleCopyClick = () => {
    inputRef.current.select()
    document.execCommand('copy')
    message.success('复制成功')
  }

标签：handleCopyClick,DOM,inputRef,获取,复制,input,文本,ref,框中
来源： https://blog.csdn.net/m0_46412825/article/details/121349430