CopyToClipboard 复制

将文本到剪切板，复制到剪贴板功能可以应用于各种元素，基于 @uiwjs/copy-to-clipboard 封装。

import { CopyToClipboard } from 'uiw';
// or
import CopyToClipboard from '@uiw/react-copy-to-clipboard';

基础实例

import React from 'react';
import { CopyToClipboard } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      message: ''
    }
  }
  render() {
    return (
      <div>
         {
            this.setState({ message: '复制成功！你可以粘贴了。' }, () =&gt; {
              setTimeout(() =&gt; {
                this.setState({ message: '' });
              }, 2000);
            });
          }}
        &gt;
          点击我复制
        
        <div style="{{color:">{this.state.message}</div>
      </div>
    )
  }
}
export default Demo;

复制输入框内容

import React from 'react';
import { CopyToClipboard, Input, Button } from 'uiw';

class Demo extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      copyText: "生亦何欢，死亦何苦"
    };
    this.input = React.createRef();
  }
  onChange(e){
    // this.setState({
    //   copyText: e.target.value
    // })
  }
  render() {
    const { copyText } = this.state;
    return (
      <div>
        <div>
          <input value="{copyText}" type="text">
        </div>
         {
            // 复制提示
            this.setState({ message: '复制成功！你可以粘贴了。' }, () =&gt; {
              setTimeout(() =&gt; {
                this.setState({ message: '' });
              }, 2000);
            });
            this.input.current.select();
          }}
        &gt;
          <button type="primary">点击复制</button>
          <span style="{{color:">{this.state.message}</span>
        
      </div>
    )
  }
}
export default Demo;

CopyToClipboard