react实现一键复制功能

实现功能如上图：

input 和 button 按钮是在一个元素里面，需要点击复制的时候，复制到input 中的value值，可以在任何地方粘贴

代码：

//message 用于提示是否复制成功，是antd 自带的组件，可以直接引用
import { message } from 'antd'
  		<div className='inputBox' style={{position: 'relative'}}>
        	 <Input
              className={`copyInput apiInput`}
              value={this.state.apiKeyValue}
              addonAfter={
                <button onClick={this.copyAccessKey } className={`verificationCode`}>
                      点击复制</button> 
                  } /> 
               </div> 
               
    //一键复制功能
    copyAccessKey = () => {
    	//因为我的input框里面还有button 按钮，所以在选择节点的时候，一定要只选择input  
        var copyDOM = document.querySelector(".inputBox input");  //需要复制文字的节点
        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(); 
    }