Package Exports

@uiw/react-copy-to-clipboard
@uiw/react-copy-to-clipboard/cjs/index.js
@uiw/react-copy-to-clipboard/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-copy-to-clipboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
        <CopyToClipboard
          text="我被一个连接复制了！"
          onClick={() => {
            this.setState({ message: '复制成功！你可以粘贴了。' }, () => {
              setTimeout(() => {
                this.setState({ message: '' });
              }, 2000);
            });
          }}
        >
          点击我复制
        </CopyToClipboard>
        <div style={{color: '#28a745'}}>{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
            type="text"
            ref={this.input}
            value={copyText}
            onChange={this.onChange.bind(this)}
          />
        </div>
        <CopyToClipboard 
          style={{ marginTop:10, display:'inline-block' }} 
          text={copyText}
          onClick={() => {
            // 复制提示
            this.setState({ message: '复制成功！你可以粘贴了。' }, () => {
              setTimeout(() => {
                this.setState({ message: '' });
              }, 2000);
            });
            this.input.current.select();
          }}
        >
          <Button type="primary">点击复制</Button>
          <span style={{color: '#28a745'}}>{this.state.message}</span>
        </CopyToClipboard>
      </div>
    )
  }
}
export default Demo;

CopyToClipboard

参数	说明	类型	默认值
text	拷贝的文本	String	-
onClick	点击事件	Function(text,isCopy,event)	-